Question

我需要一种方法将样式'追加'到css中的同一个div。我知道这可以用jQuery完成，但我想知道是否可以使用样式表。

我的div有一个类.myClass，然后我给它一个自定义属性“customAttr”。我需要将背景图像放在渐变之上。

在下面的示例中，我实际上同时指定了属性和类。但实际上，我需要能够在以后添加它，这样图像就会出现在之前可见的背景之上。此外，我还会指定更多背景以适应旧浏览器。

div {
    height: 70px;
    width: 70px;
}

div[customAttr="hello"] {
    background-image: url("http://s22.postimg.org/5cvkclhi5/bolt.png");
}

div.myClass {
    background: background: linear-gradient(red, blue);
}

谢谢！

Answer 1

CSS渐变也是background-image的值（即使用background速记指定），因此即使选择器具有正确的特异性，您也必须将图片和渐变指定为多个背景：

＆＃13;

div {
    height: 70px;
    width: 70px;
}

.myClass[customAttr="hello"] {
    background: url("http://s22.postimg.org/5cvkclhi5/bolt.png"), linear-gradient(red, blue);
}

.myClass {
    background: linear-gradient(red, blue);
}

＆＃13;

<div class="myClass" customAttr="hello"></div>

＆＃13;

或者，您可以使用伪元素添加额外的图像：

＆＃13;

div {
    height: 70px;
    width: 70px;
    position: relative;
}

.myClass[customAttr="hello"]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("http://s22.postimg.org/5cvkclhi5/bolt.png");
}

.myClass {
    background: linear-gradient(red, blue);
}

＆＃13;

<div class="myClass" customAttr="hello"></div>

＆＃13;

Answer 2

你也可以这样做..

div.myClass {
    background:    url("http://s22.postimg.org/5cvkclhi5/bolt.png") no-repeat,
     linear-gradient(red, blue) ;
}

http://jsfiddle.net/umairorana/6mc2v7mx/

Answer 3

这是你正在寻找的那种效果吗？

http://jsfiddle.net/ben220/e3912d78/

HTML：

<body>
<div></div>
</body>

CSS：

div {
    height: 350px;
    width: 500px;
    position: relative;
    background: linear-gradient(red, blue);
}

div::after {
    content:"";
    background: url("tree.jpg") no-repeat;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

我能想到的唯一方法就是为背景图像添加不透明度，但似乎没有传统方法在CSS中执行此操作。但是你可以使用:: after属性进行解决。这基本上允许您在不更改HTML的情况下将内容插入网页。在这个例子中，我只在HTML代码中包含了一个div。另一个包含背景图像，完全是用css完成的。

我希望这会有所帮助。

本

如何追加＆＃39; CSS中更多样式的背景？

3 个答案: