Question

我一直在学习:after选择器，我想创建一个漂亮的画廊。

我为画廊制作了我想要的缩略图。目前，我的缩略图仅适用于:after选择器。

然而，我希望能够在HTML文件中设置背景图像，而不是将每个缩略图设为自己的类。

我想知道实现这一目标的最佳方法。

body{
  font-family: Arial, sans-serif;
}
a, a:hover, a:focus{
  text-decoration: none;
  color: #fff;
}
.thumbnailouterwrap{
  width: 250px;
  height: 250px;
}
.imgthumbnail{
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  position: relative;

}
.imgthumbnail:after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png");
  background-size: cover;
  background-position: center;
  transition: 500ms all ease-in-out;

}

.thumbnailinnerwrap{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1d1d1d;
}
.thumbtext{
  opacity: 0;
  transition: 500ms all ease-in-out;
  transform: scale(1, 1);
  z-index: 1;
}
.imgthumbnail hr{
  width: 0%;
  border-top: solid 1px #fff;
  transition: 800ms all ease-in-out;
}

.imgthumbnail:hover .thumbtext, .thumbtext:hover{
  opacity: 1;
}
.imgthumbnail:hover hr, hr:hover{
  width: 100%;
}
.imgthumbnail:hover:after{
  transform: scale(1.2, 1.2);
  opacity: 0.7;
  filter: blur(2px);
}

<body>
  <div class="thumbnailouterwrap">
    <a href="http://jsfiddle.net" class="anchorthumb">
      <div class="thumbnailinnerwrap">
        <div class="imgthumbnail">
          <div class="thumbtext">
            <h3>Title</h3>
            <hr/>
            <p>Description</p>
          </div>
        </div>
      </div>
    </a>
  </div>

</body>

JsFiddle

很抱歉，如果不清楚，或者这篇文章不好（这是我的第一篇）

Answer 1

如果我理解正确，您希望使用子图像设置父元素的样式。

您可以做的是设置background-image .parentSelector，但background-size 0。{ 然后，您在.childSelector中继承此背景图片，并放置更大的background-size。

＆＃13;

div {
  outline: 1px solid black;  
}
.parentSelector {
  background-image: linear-gradient(green, gold);
  background-size: 0 0;
  display: block;
  overflow: hidden;
  height: 50vh; width: 50vh;
}

.childSelector {
  display: inline-block;
  background-image: inherit;
  background-size: cover;
}

＆＃13;

<div class='parentSelector'>
  parentSelector
  <div class='childSelector'>
    childSelector
  </div>
</div>

＆＃13;

Answer 2

建议不要在background-image文件中设置html。
如果您想使用:after选择器，可以使用data-属性，但尚未在任何地方实施。（Using HTML data-attribute to set CSS background-image url）

.imgthumbnail:after{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: attr(data-image-src url);
    background-size: cover;
    background-position: center;
    transition: 500ms all ease-in-out;

}

...
<div class="imgthumbnail" data-image-src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png">
    <div class="thumbtext">
        <h3>Title</h3>
        <hr/>
        <p>Description</p>
    </div>
</div>
...

您可以使用:nth-child选择器为每个元素设置背景图像。您可以将style标记添加到html文件中，但不在html内容中。

示例：

.imgthumbnail:first-child:after { 
   background-image:url(first_image_url);
}

.imgthumbnail:nth-child(2):after { 
   background-image:url(second_image_url);
}

... and so on.

http://www.w3schools.com/cssref/sel_nth-child.asp

在html

2 个答案: