Question

根据other SO solutions，我尝试给伪元素（height: X px; width: X px;）提供明确的固定维度，但即使这样有效，我也想要一个适合其父元素的可缩放的响应式图像，因此固定尺寸对我来说是不可接受的。如何让background-image显示并同时自动缩放？

HTML：

<h3>This is a title</h3>

CSS：

 h3:before{
   background-image:url('https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg'); 
   background-size: contain;
   background-repeat: no-repeat;
   display: block;
 }

Answer 1

尝试将这些样式添加到伪元素

content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;

Answer 2

试试这个

def standardOut = new StringBuffer(), standardErr = new StringBuffer()

def command = $/
    aws ec2 describe-instances --region us-east-2 --filters "Name=tag:Env,Values=qaint" --query "Reservations[*].Instances[*].PrivateIpAddress" | 
    grep -o '\"[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\"' | 
    awk {'printf $0 ", "'} | 
    awk {'print "[" $0'} | 
    awk {'gsub(/^[ \t]+|[ \t]+$/, ""); print'} | 
    awk {'print substr ($0, 1, length($0)-1)'} | 
    awk {'print $0 "]"'}
    /$

def proc = command.execute()
proc.consumeProcessOutput(standardOut, standardErr)
proc.waitForOrKill(1000)

return standardOut

Answer 3

您可以在background内使用h3，然后使用background-size调整尺寸。

Stack Snippet

h3 {
  background-image: url(https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg);
  background-size: auto 40px;
  background-repeat: no-repeat;
  display: block;
  padding-top: 40px;
}

<div class="wrapper">
  <h3>This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</h3>
</div>

Answer 4

我添加了content: '';并为伪元素指定了height和min-width。

＆＃13;

h3:before {
  content: '';
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMdl8cg3CDenBgBdDey8W2KUfDIfKO7ZcPk6c5KtuLn8OJBzu8');
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  min-width: 150px;
  height: 40px;
}

＆＃13;

<h3>
  This is a title
</h3>

＆＃13;

伪元素背景图像不起作用

4 个答案: