CSS :before 和 background-image... 它应该工作吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7203697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:24:38  来源:igfitidea点击:

:before and background-image... should it work?

cssbackground-image

提问by Michi

I've got a div and apply :beforeand :afteran image as content. That works perfectly. Now I would need to apply a background image so it does repeat as the divresizes, but it does not seem to work. Is background image on :beforeand :aftersupposed to be working?

我有一个 div 和 apply:before:after一个图像作为内容。这完美地工作。现在我需要应用背景图像,以便它在div调整大小时重复,但它似乎不起作用。背景图像是否打开:before并且:after应该有效?

The current code:

当前代码:

HTML:

HTML:

<div id="videos-part">test</div>

CSS:

CSS:

#videos-part{
    background-color: #fff;
    height: 127px;
    width: 764px;
    margin: -6px 0 -1px 18px;
    position: relative;
}
#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
}

回答by sandeep

@michi; define heightin your beforepseudo class

@米奇;height在你的before伪类中定义

CSS:

CSS:

#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
    height:20px;
}

回答by meo

Background images on :beforeand :afterelements should work. If you post an example I could probably tell you why it does not work in your case.

:before:after元素上的背景图像应该可以工作。如果您发布一个示例,我可能会告诉您为什么它在您的情况下不起作用。

Here is an example: http://jsfiddle.net/namas/3/

这是一个例子:http: //jsfiddle.net/namas/3/

You can specify the dimensions of the element in % by using background-size: 100% 100%(width / height), for example.

例如,您可以使用background-size: 100% 100%(width / height)以百分比形式指定元素的尺寸。

回答by Altravista

 color: transparent; 

make the tricks for me

为我做把戏

#videos-part:before{
    font-size: 35px;
    line-height: 33px;
    width: 16px;
    color: transparent;
    content: 'AS YOU LIKE';
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik04LDE0TDQsNDloNDJsLTQtMzVIOHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik0zNCwxOWMwLTEuMjQxLDAtNi43NTksMC04ICBjMC00Ljk3MS00LjAyOS05LTktOXMtOSw0LjAyOS05LDljMCwxLjI0MSwwLDYuNzU5LDAsOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMzQiIGN5PSIxOSIgcj0iMiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTkiIHI9IjIiLz48L3N2Zz4=');
    background-size: 25px;
    background-repeat: no-repeat;
    }

回答by StSav012

For some reason, I need floatproperty of a pseudo-element to be set to leftor rightfor the image to appear. heightand widthof the pseudo-element should be both set but not in percentage. I'm on Firefox 67.

出于某种原因,我需要float将伪元素的属性设置为leftright显示图像。heightwidth伪元素的应该都设置但不是百分比。我在 Firefox 67 上。

回答by Val Blant

The problem with other answers here is that they use position: absolute;

这里其他答案的问题是他们使用 position: absolute;

This makes it difficult to layout the element itself in relation to the ::beforepseudo-element. For example, if you wish to show an image before a link like this: enter image description here

这使得很难相对于::before伪元素来布局元素本身。例如,如果您希望在这样的链接之前显示图像: 在此处输入图片说明

Here's how I was able to achieve the layout in the picture:

这是我如何能够实现图片中的布局:

a::before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url(../../lhsMenu/images/internal_link.png) no-repeat 0 0;
  background-size: 80%;
}

Note that this method allows you to scale the background image, as well as keep the ability to use margins and padding for layout.

请注意,此方法允许您缩放背景图像,并保留使用边距和填充进行布局的能力。