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

Question

是否可以使用以下图像进行大小尺寸：

之前

ie如果我想在ContentX之后使用视网膜图像 - 我将如何设置大小？

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

Answer 1

您始终可以使其成为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);
  }
}

Answer 2

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

如果您需要使用伪元素，则需要定位并伸展该元素，因此它与父元素的大小相同。这是通过在父上设置position: relative;并使用position: absolute;将位置属性设置为零来完成的（top: 0;，right: 0;，bottom: 0;，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;
}

<h2>Background Image</h2>
<div class="bg">
  <div class="btn">Button</div>
  <button type="button">Button</button>
</div>
<h2>Before Pseudo Element Background Image</h2>
<div class="pseudo">
  <div class="btn">Button</div>
  <button type="button">Button</button>
</div>

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