是否可以使用:before?
调整放置图像的大小即如果我想在contentx之后使用视网膜图像 - 我将如何设置尺寸?
.buy_tickets_btn:before{
content:url(../images/buttons/pink_ticket_btn_bg.png);
答案 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;
}

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