我试图创建一个CSS按钮,并添加一个图标使用:以后,但图像永远不会显示。如果我用’background-color:red’替换’background’属性,那么会显示一个红色框,所以我不知道这里有什么问题。
HTML:
- <a class="button green"> Click me </a>
CSS:
- .button {
- padding: 15px 50px 15px 15px;
- color: #fff;
- text-decoration: none;
- display: inline-block;
- position: relative;
- }
- .button:after {
- content: "";
- width: 30px;
- height: 30px;
- background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
- background-color: red;
- top: 10px;
- right: 5px;
- position: absolute;
- display: inline-block;
- }
- .green {
- background-color: #8ce267;
- }
You can check this fiddle to see what I mean exactly.
感谢任何提示。
解决方法
几件事情
(a)你不能拥有背景颜色和背景,背景总是会赢。在下面的例子中,我们通过速记组合它们,但是当图像不显示时,这将产生仅作为后备方法的颜色。
(b)不滚动不起作用,我不相信它是背景图像的有效属性。尝试像固定的东西:
- .button:after {
- content: "";
- width: 30px;
- height: 30px;
- background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
- top: 10px;
- right: 5px;
- position: absolute;
- display: inline-block;
- }