我想要做的是显示两者background-color和background-image,以便我的一半div将覆盖正确的阴影背景图像,而另一部分将覆盖背景颜色.
但是当我使用时background-image,颜色会消失.
我一直试图在我的背景图像上使用线性渐变,以便在背景底部从黑色到透明获得淡化效果,但似乎无法使其显示.
我在这里阅读了其他案例和例子,但没有一个对我有用.我只能看到渐变或图像,但不能同时看到它们.这是链接
只需点击第一个徽标,忽略该效果,之后我正在尝试的是整个站点中的正文.
这是我的css代码:
body {
background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}是否可以在CSS中为渐变添加噪声？
这是我的径向渐变代码:
body {
color: #575757;
font: 14px/21px Arial, Helvetica, sans-serif;
background-color: #2f3b4b;
background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%);
background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63));
}
我会添加什么来在它上面产生噪音,给它纹理？
今天我设计了一个透明的PNG背景,只能坐在div的左上角,div的其余部分将为PNG的所有透明区域以及div本身的其余部分保留渐变背景.
通过我认为可行的代码解释可能更好:
#mydiv .isawesome {
/* Basic color for old browsers, and a small image that sits in the top left corner of the div */
background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;
/* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
}
我发现的是大多数浏览器选择其中一个 - 大多数选择渐变,因为它更深入CSS文件.
我知道这里的一些人会说"只是将渐变应用于你正在制作的PNG" - 但这并不理想,因为div会保持动态高度 - 有时很短,有时很高.我知道这个渐变并不重要, …
今天我学会了CSS3支持多种背景,这很棒.我真正喜欢的是能够动态组合多个背景,EG:
.Watermarked{
background: url('text/logo.png') bottom right no-repeat;
}
HTML:
<div class="Watermarked"
style="background:url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;">
...
以某种方式产生计算的样式:
background: url('text/logo.png') bottom right no-repeat,
url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;
当然,我可以硬编码额外的背景样式或使用jquery添加它.我正在寻找那种甜美,纯粹,仅限CSS的解决方案.
回答
接受thirtydot的纯CSS答案 - "你不能".
值得强调的是,如果您正在使用SASS(Rails 3.1等),硬编码样式通过可变使用更加可口:
$watermarkImage: url('text/logo.png') left top no-repeat;
...
#very_pretty_sunset{
background: $watermarkImage, url('photos/very_pretty_sunset.png') right bottom no-repeat;
}
当我在我的页面上使用它时,不会出现背景渐变(我现在只担心Safari和Firefox):
$("#myElement").css({
backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)",
backgroundImage: "-moz-linear-gradient(top, black, white)"
});
我尝试在适当的浏览器中使用其中一个,但在那里没有运气.
我可以在我的代码中为元素使用内联样式属性,但如果有一种方法可以使用jQuery的API,我宁愿不这样做.
我想通过多个背景创建边框，并且发现了一个问题。我需要对每个背景应用优先级，因为其中许多彼此重叠。
是否有任何CSS属性可为每个背景设置z-index？
left-top-corner(z-index:2) top(repeat-x) right-top-corner(z-index:2)
left(repeat-y)
left-bottom-corner(z-index:2) bottom(repeat-x) right-bottom-corner(z-index:2)
像那样。
就像是：
background-z-index:2,1,2 .. etc.
我有一个按钮,上面有一个渐变.我还需要一个图像箭头,但是当我将它放到背景中时,一个带有两个类的按钮似乎无法工作.以下是一个例子:
<button class="btn btn-wide">Load more</button>
.btn{
background: rgb(0,166,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,166,255,1) 0%, rgba(0,166,255,1) 50%, rgba(2,154,236,1) 53%, rgba(2,154,236,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,166,255,1)), color-stop(50%,rgba(0,166,255,1)), color-stop(53%,rgba(2,154,236,1)), color-stop(100%,rgba(2,154,236,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* W3C */ …我有一个带有线性渐变背景的盒子,创建为双色纯色.一种颜色是44px - 其余颜色是另一种颜色,如下所示:
background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);
效果很好.现在我想使用边框图像线性渐变以相同的方式在此元素的顶部和底部添加双色边框 - 以便边框的颜色遵循背景的颜色.诀窍是使用线性渐变作为纯色.
我尝试过这样的事情:
border-image: linear-gradient(right, #365aa5 44px, #000 0);
border-style: solid;
border-width: 2px 0 2px 0;
但很明显,它不起作用.
我有什么想法可以使这项工作？
我正在尝试使用CSS Gradients创建一个按钮以及一个位于渐变之上的图标.我尝试了两种方法,两者都失败了.
第一:
.btn {
background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));
background: url(../images/btn.png);
}
我应该知道那不会奏效!但我也听说过CSS3多个背景图片,所以我就这样试了.
第二:
.btn {
background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)), url(../images/btn.png);
}
仍然没有工作:(.有没有办法真正做到这一点？添加<img>标签<button>？