CSS3:之前 - 您可以使用视网膜图像吗?

时间:2016-12-09 13:22:58

标签: css css3

是否可以使用:before?

调整放置图像的大小

即如果我想在contentx之后使用视网膜图像 - 我将如何设置尺寸?

.buy_tickets_btn:before{
        content:url(../images/buttons/pink_ticket_btn_bg.png);

2 个答案:

答案 0 :(得分:4)

您始终可以将其设为background-image,只需设置content: ""; width: 200px; height: 300px; display: inline-block;即可。

根据非视网膜图像的尺寸调整尺寸。

通过应用background-size: cover;,您可以确保视网膜图像正确缩小。

.buy_tickets_btn:before{
  background: url(../images/buttons/pink_ticket_btn_bg.png) no-repeat 0 0;
  background-size: cover;
  content: "";
  width: 200px;  /* adjust to width of no-retina image */
  height: 300px; /* adjust to height of no-retina image */
  display: inline-block;
}

对于要使用的视网膜图像,只需调整相关媒体查询中的文件名(这里只是一个示例媒体查询):

@media screen and (min-resolution: 192dpi) { 
  .buy_tickets_btn:before{
    background-image: url(../images/buttons/pink_ticket_btn_bg_retina.png);
  }
}

答案 1 :(得分:1)

如果可以,并且没有令人信服的理由使用像:before:after这样的伪元素,我会在您的按钮元素上设置背景图片,并将background-size设置为100%cover

如果需要使用伪元素,则需要定位和拉伸该元素,使其与父元素的大小相同。这是通过在父级上设置position: relative;并使用position: absolute;并将位置属性设置为零(top: 0;right: 0;bottom: 0;,{{1 }})。将这些属性设置为零会将元素拉伸到其包含元素的边界。

下面我有两个例子,一个使用普通元素的背景,另一个使用伪元素。



left: 0;

.btn,
button {
  width: 200px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
  background-color: transparent;
}
button {
  margin-top: 1rem;
  border: 0;
}

.bg .btn,
.bg button,
.pseudo .btn:before,
.pseudo button:before {
  background-image: url( 'http://lorempixel.com/1200/400/city/1' );
  background-size: 100%;
}

.pseudo .btn,
.pseudo button {
  position: relative;
}
.pseudo .btn:before,
.pseudo button:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}




我已经设置了宽度和高度,但如果按钮被确定其宽度的另一个元素包含,则可能不需要这样做。