Question

我对自己的想法有点麻烦，但想问别人是否有可能这样做。

我想使用css函数attr()来获取数据属性的值，并使用该值使用url()函数为不同分辨率设置背景图像。

我正在使用带有模板引擎的cms，因此在编译模板之前我不知道图像网址，因此希望从数据属性中获取值。

这是一些代码。

＆＃13;

* {
  box-sizing: border-box;  
}  

body {
  padding: 1em;  
}

.carousel__item {
  display: block;
  position: relative;
  width: 60%;
}

/* this works */
.carousel__image {
  background-image: url(//placehold.it/200/200);  
}

/* this doesn't but I would like it to */
.carousel__image {
  background-image: url(attr(data-image-mobile));
}

.carousel__image {
  background: #282C32;
  width: 100%;
  padding-top: 56.25%;
  margin: 0;
  background-repeat: none;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* change the resolution when the screen size is larger than 600px */
@media screen and (min-width: 600px){
  .carousel__image {
    background-image: url(attr(data-image-full));
    padding-top: 75%;
  }
}

.carousel__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.carousel__link::after {
  content: attr(data-attr-test);
  position: absolute;
  top: 10%;
  left: 10%;
  background: #eee;
  padding: 1em;
}

＆＃13;

<div class="carousel__item">
  <figure class="carousel__image"
    data-image-full="//placehold.it/400/200"
    data-image-mobile="//placehold.it/200/200">
    <figcaption class="carousel__figcaption">a caption</figcaption>
  </figure>
  <a class="carousel__link" 
     href="#somewhere" 
     title="somewhere"
     data-attr-test="attr works for this yo"></a>
</div>

＆＃13;

如果这是不可能的，我可以通过另一种方式实现相同的目标，我能想到的另一个hacky解决方案是复制显示不同分辨率的图形元素，例如。

<div class="carousel__item">
  <figure class="carousel__image carousel__image--full"
    style="background-image:url(//placehold.it/600/200);">
    <figcaption class="carousel__figcaption">a caption</figcaption>
  </figure>
  <figure class="carousel__image carousel__image--mobile"
    style="background-image:url(//placehold.it/200/200);">
    <figcaption class="carousel__figcaption">a caption</figcaption>
  </figure>
  <a class="carousel__link" href="//somewhere.com" title="somewhere"></a>
</div>

但是这让我感觉很脏，只为图像复制html。

我知道我可以在js中这样做，因为我是一个js家伙，但想知道是否有可能只用css。

干杯

CSS：为不同的分辨率

0 个答案: