Cách phủ hình ảnh

Tôi muốn phủ một hình ảnh với hình ảnh khác bằng CSS. Một ví dụ về điều này là hình ảnh đầu tiên (nền nếu bạn muốn) sẽ là liên kết hình thu nhỏ của sản phẩm, với liên kết mở hộp đèn / cửa sổ bật lên hiển thị phiên bản lớn hơn của hình ảnh.

Trên đầu hình ảnh được liên kết này, tôi muốn một hình ảnh của kính lúp, để cho mọi người thấy rằng hình ảnh có thể được nhấp để phóng to nó (rõ ràng điều này không rõ ràng nếu không có kính lúp).

Tôi vừa hoàn thành việc này chính xác trong một dự án. Phía HTML trông hơi giống thế này:

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

Sau đó, sử dụng 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;
}

Tôi đã để lại rất nhiều mẫu trong đó trên CSS để bạn có thể thấy tôi đã quyết định làm kiểu như thế nào. Lưu ý tôi hạ thấp độ mờ để bạn có thể nhìn xuyên qua kính lúp.

Hi vọng điêu nay co ich.

EDIT: Để làm rõ ví dụ của bạn - bạn có thể bỏ qua visibility:hidden;và giết chết việc :hoverthực thi nếu bạn muốn, đây chỉ là cách tôi đã làm.

Một kỹ thuật, được đề xuất bởi bài viết này , sẽ là để làm điều này:

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

Một cách đơn giản để làm điều đó chỉ với CSS mà không sửa đổi nội dung bằng các thẻ bổ sung được hiển thị tại đây (với mã và ví dụ): http://soukie.net/2009/08/20/typography-and-css/#example

Điều này hoạt động, miễn là phần tử cha không sử dụng định vị tĩnh. Đơn giản chỉ cần đặt nó để định vị tương đối thực hiện các mẹo. Ngoài ra, IE <8 không hỗ trợ : trước bộ chọn hoặc nội dung .

Đây là cách tôi đã làm nó gần đây. Không hoàn hảo về mặt ngữ nghĩa, nhưng hoàn thành công việc.

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

Bạn có thể muốn xem hướng dẫn này: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

Trong đó, người viết sử dụng một phần tử span trống để thêm một hình ảnh chồng chéo. Bạn có thể sử dụng jQuery để thêm các phần tử span đã nói, nếu bạn muốn giữ mã của mình sạch nhất có thể. Một ví dụ cũng được đưa ra trong bài viết nói trên.

Hi vọng điêu nay co ich!

-Dave

Nếu bạn chỉ muốn kính lúp khi di chuột thì bạn có thể sử dụng

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

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

Nếu bạn muốn nó ở đó vĩnh viễn, có lẽ bạn nên đưa nó vào trong thư mục gốc hoặc thêm nó bằng JavaScript thay vì thêm nó vào HTML (đây hoàn toàn là phong cách và không nên có trong nội dung).

Hãy cho tôi biết nếu bạn muốn trợ giúp về phía JavaScript.

Trong CSS3, bạn có thể làm như sau:

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

Lấy từ Tôi có thể có nhiều ảnh nền bằng CSS không?

Tất cả chúng ta muốn là cha mẹ trên con. Đây là cách bạn làm điều đó.

Bạn đặt imgvào span, đặt z-index & positioncho cả hai yếu tố và thêm displaycho nhịp. Thêm di chuột vào spanđể bạn có thể kiểm tra nó và bạn đã có nó!

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

Trừ khi bạn sử dụng <img>thẻ, nó sẽ tự hiển thị một hình ảnh, bạn sẽ không thể đạt được điều này chỉ với CSS thuần túy. Bạn cũng sẽ cần HAI yếu tố HTML - một cho mỗi hình ảnh. Điều này là do cách duy nhất bạn có thể làm cho một phần tử hiển thị ảnh thông qua CSS là với thuộc background-imagetính và mọi phần tử chỉ có thể có một hình nền. Hai yếu tố bạn chọn và cách bạn định vị chúng là tùy thuộc vào bạn. Có nhiều cách để bạn có thể định vị một yếu tố HTML trên một yếu tố khác.

Đây là một kỹ thuật tốt để hiển thị hình ảnh lớp phủ được căn giữa với nền bán trong suốt qua liên kết hình ảnh:

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

Đây là một Kỹ thuật JQuery với nền bán trong suốt.

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();
});