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

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

<img style = "background:url(thumbnail1.jpg)" src = "magnifying_glass.png" />

Я только что закончил делать это в проекте. Сторона 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, чтобы вы могли видеть, как я решил создать стиль. Обратите внимание, что я уменьшил непрозрачность, чтобы вы могли видеть сквозь лупу.

Надеюсь это поможет.

Обновлено: Чтобы прояснить ваш пример - вы можете игнорировать visibility:hidden; и убить выполнение :hover, если хотите, это было именно так, как я это сделал.

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

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

<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>

Если вам нужно только увеличительное стекло при наведении, вы можете использовать

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

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

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

Дайте мне знать, если вам нужна помощь по JavaScript.

Возможно, вы захотите ознакомиться с этим руководством: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

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

Надеюсь это поможет!

-Дэйв

A simple way of doing that with CSS only without modifying the content with additional tags is shown here (with code and example): http://soukie.net/2009/08/20/typography-and-css/#example

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

В CSS3 вы можете делать следующее:

.double-image {
    background-image: url(images/img1.png), url(images/img2.png);
}

Взял от Могу ли я использовать несколько фоновых изображений с помощью CSS?

Все, что нам нужно, это родитель выше ребенка. Вот как вы это делаете.

Вы помещаете img в span, устанавливаете z-index & position для обоих элементов и дополнительный display для диапазона. Добавьте наведение на span, чтобы вы могли протестировать его и у вас все получилось!

HTML:

<span><img src = "/images/"></span>

CSS

span img {
    position:relative;
    z-index:-1;
}
span {
    position:relative;
    z-index:initial;
    display:inline-block;
}
span:hover {
    background-color:#000;
}

Вот хороший способ отображения наложенного изображения с полупрозрачным фоном по центру ссылки на изображение:

HTML

<div class = "image-container">
    <a class = "link" href = "#" >  
        <img class = "image" src = "/img/thumbnail.png"/>
        <span class = "overlay-image"><img src = "/img/overlay.png"></span>
    </a>    
</div>

CSS

div.image-container{
    position: relative;
}
a.link{
    text-decoration: none;  
    position: relative;
    display: block;
}

a.link span.overlay-image{
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.2); /* black background with 20% alpha */
}

a.link span.overlay-image:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;   
}

a.link:hover span.overlay-image img{
    display: inline-block;  
    vertical-align: middle;     
}

a.link:hover span.overlay-image{
    visibility: visible;
}

Вот техника JQuery с полупрозрачным фоном.

HTML

<html>
<head>
    <link rel = "stylesheet" href = "css/style.css" type = "text/css" media = "screen" title = "no title" charset = "utf-8">
    <title>Image Gallery</title>
</head>
<body>
    <h1>Image Gallery</h1>

    <ul id = "imageGallery">
        <li><a href = "images/refferal_machine.png"><img src = "images/refferal_machine.png" width = "100" alt = "Refferal Machine By Matthew Spiel"></a></li>
        <li><a href = "images/space-juice.png"><img src = "images/space-juice.png" width = "100" alt = "Space Juice by Mat Helme"></a></li>
        <li><a href = "images/education.png"><img src = "images/education.png" width = "100" alt = "Education by Chris Michel"></a></li>
        <li><a href = "images/copy_mcrepeatsalot.png"><img src = "images/copy_mcrepeatsalot.png" width = "100" alt = "Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
        <li><a href = "images/sebastian.png"><img src = "images/sebastian.png" width = "100" alt = "Sebastian by Mat Helme"></a></li>
        <li><a href = "images/skill-polish.png"><img src = "images/skill-polish.png" width = "100" alt = "Skill Polish by Chris Michel"></a></li>
        <li><a href = "images/chuck.png"><img src = "images/chuck.png" width = "100" alt = "Chuck by Mat Helme"></a></li>
        <li><a href = "images/library.png"><img src = "images/library.png" width = "100" alt = "Library by Tyson Rosage"></a></li>
        <li><a href = "images/boat.png"><img src = "images/boat.png" width = "100" alt = "Boat by Griffin Moore"></a></li>
        <li><a href = "images/illustrator_foundations.png"><img src = "images/illustrator_foundations.png" width = "100" alt = "Illustrator Foundations by Matthew Spiel"></a></li>
        <li><a href = "images/treehouse_shop.jpg"><img src = "images/treehouse_shop.jpg" width = "100" alt = "Treehouse Shop by Eric Smith"></a></li>
    </ul>

    <script src = "http://code.jquery.com/jquery-1.11.0.min.js" type = "text/javascript" charset = "utf-8"></script>
    <script src = "js/app.js" type = "text/javascript" charset = "utf-8"></script>
</body>
</html>

CSS

/** Start Coding Here **/
#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

#overlay img {
 margin-top: 10%; 
}

#overlay p {
 color:white; 
}

app.js

var $overlay = $('<div id = "overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

// 1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();

  var imageLocation = $(this).attr("href");

  // 1.1 Show the overlay.
  $overlay.show();

  // 1.2 Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  // 1.3 Get child's alt attribute and set caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);


 // 2. Add overlay
 $("body").append($overlay);

    // 2.1 An image to overlay
    $overlay.append($image);

    // 2.2 A caption to overlay
    $overlay.append($caption);

});

//When overlay is clicked
$overlay.click(function(){
  //Hide the overlay
  $overlay.hide();
});