CSS背景图片在:元素后

前端之家收集整理的这篇文章主要介绍了CSS背景图片在:元素后前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图创建一个CSS按钮,并添加一个图标使用:以后,但图像永远不会显示。如果我用’background-color:red’替换’background’属性,那么会显示一个红色框,所以我不知道这里有什么问题。

HTML:

  1. <a class="button green"> Click me </a>

CSS:

  1. .button {
  2. padding: 15px 50px 15px 15px;
  3. color: #fff;
  4. text-decoration: none;
  5. display: inline-block;
  6. position: relative;
  7. }
  8.  
  9. .button:after {
  10. content: "";
  11. width: 30px;
  12. height: 30px;
  13. background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
  14. background-color: red;
  15. top: 10px;
  16. right: 5px;
  17. position: absolute;
  18. display: inline-block;
  19. }
  20.  
  21. .green {
  22. background-color: #8ce267;
  23. }

You can check this fiddle to see what I mean exactly.

感谢任何提示

解决方法

几件事情

(a)你不能拥有背景颜色和背景,背景总是会赢。在下面的例子中,我们通过速记组合它们,但是当图像不显示时,这将产生仅作为后备方法的颜色。

(b)不滚动不起作用,我不相信它是背景图像的有效属性。尝试像固定的东西:

  1. .button:after {
  2. content: "";
  3. width: 30px;
  4. height: 30px;
  5. background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
  6. top: 10px;
  7. right: 5px;
  8. position: absolute;
  9. display: inline-block;
  10. }

我更新了你的jsFiddle,并显示了这个形象。

猜你在找的CSS相关文章