相关疑难解决方法(0)
使用多个 css 背景图像/渐变时，正确的速记语法是什么？
我需要通过 CSS 将多个背景附加到一个元素，但我不能使用:before/:after.
我想知道使用多个 CSS 背景图像的正确语法是什么。
background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF;
background: url(…) 600px 10px no-repeat, url(…) 10px 10px no-repeat;
上班。
这是我目前拥有的：
background-image: rgba(0, 0, 0, 0.4) url("img/icons-18-white.png") no-repeat 0% 50%,linear-gradient( #9ad945, #7eb238 );
这是被忽略的。只有当我提供纯 url 时，它才有效：
background-image: url("img/icons-18-white.png") , linear-gradient( #9ad945, #7eb238 );
问题：
我正在专门寻找一种设置background-size/position/repeat每个图像的方法，所以如果有人能指出正确的语法，那就太好了！
编辑：添加scroll和更换background-image用background
background: rgba(0, 0, 0, 0.4) url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png") no-repeat scroll 0% 50%, linear-gradient( #9ad945, #7eb238 …推荐指数
解决办法
查看次数
Gradient无法在Chrome中运行,但可在Firefox中使用
我正在尝试为Chrome使用webkit渐变标记,但它根本不起作用.我已经在Firefox中尝试了它background:-moz-linear-gradient(#000, #888);,它运行得很好.
然而,background: -webkit-gradient(linear, from(#000), to(#888));它不起作用.这是我的一些代码:
echo "<tr style='background:-moz-linear-gradient(#000, #888); background: -webkit-gradient(linear, from(#000), to(#888));'><td width='65'><img src='images/avatar/defaultuser.jpg' height='65' width='65'>";
推荐指数
解决办法
查看次数
是否有可能毕业HTML元素的不透明度？
我想要一个<div>元素(整个元素,内容和所有东西)淡出底部.它是截断一个必须适应非常严格的空间的新闻帖子(并且可能包含不可预测的大小元素).
我能找到的一切都是在背景颜色上使用透明度渐变.除了新闻帖后面是一个背景图片,哪个会没问题,所以我不能只在内容底部的顶部放置一个颜色渐变.
我将图像渐变放在内容的顶部,但是当用户滚动时,背景会移动到内容后面.
想象一下这存在:
opacity: -webkit-linear-gradient( ... );
毕业元素的实际不透明度是唯一可行的.可能吗？
推荐指数
解决办法
查看次数
如何使用 CSS 在现有背景上叠加渐变背景？
我正在尝试将白黑线性渐变叠加到现有图像上。我把它设置如下；然而，只有渐变层显示。有人能指出我哪里出错了吗？
JS小提琴：http : //jsfiddle.net/6nJJD/
HTML
<div>hello</div>
CSS
div {
background:linear-gradient(to bottom, #ffffff 0%, #000000 100%), url("http://us.123rf.com/400wm/400/400/adroach/adroach1210/adroach121000001/15602757-flower-and-bird-ornaments-retro-tile-repeat-as-many-times-as-you-like.jpg") repeat #eae7de;
color:#544a46;
font:62.5%/1.6 Helvetica, Arial, Sans-serif;
height:500px;
width:500px
}
推荐指数
解决办法
查看次数
CSS在之前的背景图像上添加背景图像而不覆盖
我有一个我正在编写的CSS页面,我需要在一个类中应用背景图像,然后使用另一个类将部分透明的背景图像放在已经存在的那个上面.这有点沙拉,所以让我举一些示范.
html{
<div class="background1">...</div>
<div class="background1 backgroundFilter">...</div>
<div class="background2">...</div>
<div class="background2 backgroundFilter">...</div>
}
css {
.background1 {
background-image:url(...);
}
.background2 {
background-image:url(...);
}
.backgroundFilter {
background-image:url(...);
}
}
在这个例子中,第一个div应该有背景图像1,第二个div应该有背景图像1但是滤镜图像放在它上面,然后第三个应该是图像2而第四个应该是图像2,其上有相同的滤镜.
但是在这个例子中,.backgroundFilter将覆盖前一个图像而不是覆盖它.
这是可能的还是我需要为每个版本的背景图像创建一个不同的类？
推荐指数
解决办法
查看次数
如何将背景图像淡化为透明度？
这是一个相关的图像:
我想要实现像我图像右侧所示的东西.但我也有一个父容器,它有自己的背景图像,而不是纯色.
有什么建议？
编辑:忘记添加,跨浏览器兼容性很重要.(或至少Firefox).
推荐指数
解决办法
查看次数
与背景梯度的背景图象
我正在尝试将一个徽标添加到一个用渐变样式设置的按钮,但背景图像"删除"背景颜色...
这是小提琴:http://jsfiddle.net/FDXy5/,下面是当前的tet .css.
.rounded-orange-button {
text-align: center;
color: #FFFFFF;
display: inline-block;
border-radius: 2px;
line-height: 27px;
width: 200px;
position: relative;
background: #FF9100;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9100) to(#FA6800));
background: -webkit-linear-gradient(top, #FF9100, #FA6800);
background: -moz-linear-gradient(top, #FF9100, #FA6800);
background: -o-linear-gradient(top, #FF9100, #FA6800);
background: linear-gradient(to bottom, #FF9100, #FA6800);
-pie-background: linear-gradient(to bottom, #FF9100, #FA6800);
}
.logo-edit{
background-image: url('http://www.w3schools.com/cssref/smiley.gif');
background-repeat:no-repeat;
}
谢谢你的帮助:-)
推荐指数
解决办法
查看次数
使 div 的不透明度像线性渐变一样变化
我希望 div 的不透明度向左、上、右或下方向减小，就像linear-gradient在 中一样background-image，但只是为了整个外观（不仅仅是背景）。有什么办法可以做到吗？
我尝试使用以下代码执行此操作：
html
<body>
<div id="outer">
<div id="content">
<!-- content -->
</div>
<div id="inner">
</div>
</div>
</body>
CSS
#outer {
height: 500px;
width: 500px;
padding-left:20px;
}
#inner {
position: absolute;
height: 500px;
width: 500px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1));
z-index: 999;
}
#content {
position: absolute;
height: 500px;
width: 500px;
}
正如预期的那样，它在颜色方面效果非常好，但现在我想插入图像作为身体的背景，显然它不会像这样工作，你们会怎么做？
编辑：
你们中的一些人将其标记为css 渐变不透明幻灯片图像从左到右颜色白色的重复，但它不一样；
我不是在谈论让其获得background-image线性渐变，而是让整个 div 的一部分像渐变一样消失。
推荐指数
解决办法
查看次数
点图案叠加层在图像上渐隐
我想要一个覆盖图像的点图案，但是我需要它在右侧是透明的，并且我需要它变得不透明/对左侧可见-就像使用渐变来显示图案一样。
<html>
<head>
<style>
.image-container {
display: block;
background: url(https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg) no-repeat;
background-size: cover;
height: 400px;
width: 837px;
}
.dot-overlay {
background: url(square-pattern.svg);
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div class="image-container">
<img class="dot-overlay">
</div>
</body>
</html>结果
这是我想要达到的结果
编辑：抱歉，我忘了提到我需要此解决方案来响应（即使示例中的图像是固定大小的），并且最好在调整图像大小时也希望图案点保持相同的大小。
值得庆幸的是，Temani Afif解决方案可以对此进行管理，并且还可以控制渐变！另外，为了使点更方正，将每个百分比更改为50％，例如径向渐变（最远的一面，蓝色50％，透明50％）
推荐指数
解决办法
查看次数
CSS背景渐变与图像覆盖
只是一个非常快的我有点麻烦 - 也就是说,背景css元素的排序.
我有以下内容:
background-color: #3C3E89; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#3C3E89, #6265E4); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3C3E89, #6265E4); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3C3E89, #6265E4); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3C3E89, #6265E4); /* Standard syntax */
background-image: url('../images/logo.png');
background-size: cover;
由于某种原因,png - 虽然它有透明层 - 覆盖了我希望它所依赖的线性渐变.
我有一点根源,看看对于这个正确的方法是什么,尝试过它们,没有运气.我想知道是否有人在渐变背景上覆盖png的尝试和测试方法...
我相信每个人都会尖叫我说这是一个重复的问题 - 但除非我遗漏了一些东西,否则我无法成功实施他们的建议.
更新:
我也尝试过以下方法:
background-image:
-webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
-o-linear-gradient(#3C3E89, #6265E4), /* …推荐指数
解决办法
查看次数
标签 统计
css ×9
css3 ×4
html ×4
background ×3
html5 ×2
firefox ×1
image ×1
javascript ×1
opacity ×1
svg ×1