Вопросы Теги

Как наложить изображения

Рассмотрим приведенное ниже определение в web.xml 

<servlet>
    <servlet-name>HelloWorld</servlet-name>
    <servlet-class>TestServlet</servlet-class>
    <init-param>
        <param-name>myprop</param-name>
        <param-value>value</param-value>
    </init-param>
</servlet>

. Вы можете видеть, что init-param определен внутри элемента сервлета. Это означает, что он доступен только сервлету под декларацией, а не другим частям веб-приложения. Если вы хотите, чтобы этот параметр был доступен для других частей приложения, скажем, JSP, это должно быть явно передано JSP. Например, передается как request.setAttribute (). Это очень неэффективно и сложно кодировать.

Итак, если вы хотите получить доступ к глобальным значениям из любого места приложения без явно переданных этих значений, вам нужно использовать параметры контекста Init.

Рассмотрим следующее определение в сети. xml 

 <web-app>
      <context-param>
           <param-name>myprop</param-name>
           <param-value>value</param-value>
      </context-param>
 </web-app>

Этот параметр контекста доступен для всех частей веб-приложения и может быть получен из объекта Context. Например, getServletContext (). GetInitParameter («dbname»);

Из JSP вы можете получить доступ к параметру контекста с помощью неявного объекта приложения. Например, application.getAttribute ("dbname");

126
задан nathanchere 24 October 2013 в 21:45
поделиться

7 ответов

Я просто получил сделанное выполнение этой точной вещи в проекте. Сторона HTML, на которую походят немного это: 

<a href="[fullsize]" class="gallerypic" title="">
  <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
  <span class="zoom-icon">
      <img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
  </span>
</a>

Затем использование CSS: 

a.gallerypic{
  width:140px;
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  padding:3px;
  margin-right:5px;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

я оставил большой образец там на CSS, таким образом, Вы видите, как я решил сделать стиль. Обратите внимание, что я понизил непрозрачность, таким образом, Вы видели через лупу.

Hope это помогает.

РЕДАКТИРОВАНИЕ: Для разъяснения для примера - Вы могли проигнорировать visibility:hidden; и уничтожить :hover выполнение, если бы Вы хотели, это было просто способом, которым я сделал это.

107
ответ дан rageit 24 October 2013 в 21:45
поделиться

Вот то, как я недавно сделал это. Не прекрасный семантически, но сделали задание. 

<div class="container" style="position: relative">
<img style="z-index: 32; left: 8px; position: relative;" alt="bottom image" src="images/bottom-image.jpg">
<div style="z-index: 100; left: 72px; position: absolute; top: 39px">
<img alt="top image" src="images/top-image.jpg"></div></div>
3
ответ дан plntxt 24 October 2013 в 21:45
поделиться

Одна техника, предложенная эта статья , состояла бы в том, чтобы сделать это: 

<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />
92
ответ дан Nathan Long 24 October 2013 в 21:45
поделиться

Вы могли бы хотеть проверить это учебное руководство: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

В нем писатель использует пустой элемент промежутка для добавления накладывающего изображения. Можно использовать jQuery для введения, сказал, что элементы промежутка, если требуется сохранить код максимально чистым. Пример также дан в вышеупомянутой статье.

Hope это помогает!

-Dave

3
ответ дан Dave 24 October 2013 в 21:45
поделиться

Если Вы только желаете magnifing стекло на парении затем, можно использовать 

a:hover img { cursor: url(glass.cur); }

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

, Если Вы хотите его там постоянно, необходимо, вероятно, или включать его в исходный thumnail или добавить его с помощью JavaScript вместо того, чтобы добавить его к HTML (это - просто стиль и не должно быть в содержании).

Сообщенный мне, если Вы хотите справку на стороне JavaScript.

1
ответ дан Tim Cooper 24 October 2013 в 21:45
поделиться

Если Вы не используете эти <img> тег, который отображает изображение отдельно, Вы не сможете достигнуть этого с одним только чистым CSS. Вам также будут нужны ДВА элемента HTML также - один для каждого изображения. Это вызвано тем, что единственный способ, которым можно заставить элемент отобразить изображение с помощью CSS, с background-image свойство, и каждый элемент может иметь только одно фоновое изображение. То, которое два элемента Вы выбираете и как Вы располагаете их, ваше дело. Существует много путей, как можно расположить один элемент HTML выше другого.

0
ответ дан Vilx- 24 October 2013 в 21:45
поделиться

Простой способ сделать это с помощью CSS только без изменения содержимого с дополнительными тегами показано здесь (с кодом и примером): http://soukie.net/2009/08/20/typography-and-css/#example

Это работает, пока родительский элемент не использует статическое позиционирование. Просто установите относительное позиционирование. Кроме того, IE <8 не поддерживает селектор : before или содержимое .

11
ответ дан 24 November 2019 в 00:53
поделиться