Question

我不知道如何在照片中添加文字，并在整个照片中建立链接。我做了一个不需要更改的变暗效果，我只想向其中添加文本。我真的想保留当前的尺寸，最重要的是保持响应能力。

有指向Codepen的链接：“ https://codepen.io/pawe-dejda/pen/XyPzpK”

body, html {
    height: 100%;
}

	.caption {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
	color: #000;
}
	.responsive {
    width: 100%;
    max-width: 88px;
    height: auto;
	position: center;
}
.tz-gallery .row > div {
    padding: 2px;
	margin-bottom: 4px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

@media(max-width: 768px) {
    body {
        padding: 0;
    }
}

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.fade:hover {
	opacity: 0.5;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dejda.e-kei.pl/nuar/css/style.css">

<div class="w3-container w3-padding-64 w3-black">
	<div class="w3-content">
	    <div class="tz-gallery">

        <div class="row no-gutters">
			
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
				</a>
			</div>
 
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
				</a>
			</div>
				
			
			            <div class="col-sm-6 col-md-4">
                <a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
					<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">		
				</a>
              </div>
              </div>
              </div>
              </div>
			  </div>

Answer 1

如果我理解正确，您希望能够在图片上方发布链接（链接可以是a-href，h1，h2，span等）。为此，请执行以下操作： 1.编写一个容器div。例如：

<div>
text
</div>

将其样式（CSS）设置为所需的背景图片。确保div的大小适合图片大小。然后，您可以在div内简单地写下所需的标签（文本）。例如：

<跨度> 文本

现在事情变得有趣了。为了将文本放置在div内？ =>将div的位置设置为相对（position：relative;），并将跨度位置设置为绝对。然后在绝对位置的顶部/左侧/底部/右侧播放，文本将出现在您想要的位置。

Answer 2

这是更新的代码笔

https://codepen.io/kelvinsusername/pen/YROYZM

它添加了一个带有一些文本但不透明的容器，然后在悬停时而不是使其不那么可见（如图像）而是使其更可见。

.fade:hover .description {
   opacity: 1;
}

.description {
   position: absolute;
   z-index: 100;
   opacity: 0;
   color: #fff;
   font-size: 20px;
}

Answer 3

.tz-gallery .row>div {
            padding: 2px;
            margin-bottom: 4px;
        }

        .tz-gallery .lightbox img {
            width: 100%;
            border-radius: 0;
            position: relative;
        }

        .img-text-box {

            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.479);
            color: #ffffff;
            width: 100%;
            padding: 20px;
            font-family: Arial;
            font-size: 17px;
        }

        .fade {
            opacity: 1;
            transition: opacity .25s ease-in-out;
            -moz-transition: opacity .25s ease-in-out;
            -webkit-transition: opacity .25s ease-in-out;
            color: #e9e9e9;
        }

        .fade:hover {
            opacity: 0.5;
        }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
<div class="tz-gallery">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Be brave js is cool</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>Readability counts.</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a class="lightbox fade" href="">
                        <img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
                        <div class="img-text-box">
                            <p>If the implementation is hard to explain, it's a bad idea.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

悬停在带有文字的图像上的效果

3 个答案: