如何解决是否可以在CSS3背景上附加其他类/样式?
| 今天,我了解到CSS3支持多种背景,这非常棒。 我真正想要的是能够动态合并多个背景的功能,例如:.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解决方案。
已回答
接受纯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;
}
解决方法
CSS无法做到这一点。
以更高的特异性声明的任何“ 4”将完全覆盖另一个。
, 伪选择器:before或:after可用于添加新的背景层
/* This is your element that needs an additional background */
.myElement {
position: relative;
z-index: 1;
}
/* This is your background layer */
.myElement:before {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: /* Define your bg */;
}
, 前提条件
div的width
= img的宽度-border-image
img宽度
div的height
= img的高度-border-image
img高度
border-image
img高度=border-bottom-width
border-image
img宽度=border-right-width
您的边框图像必须是透明的(明显的)
的CSS
.Watermarked {
-moz-border-image: url(\'text/logo.png\') 0 100% 100% 0;
-webkit-border-image: url(\'text/logo.png\') 0 100% 100% 0;
-o-border-image: url(\'text/logo.png\') 0 100% 100% 0;
border-image: url(\'text/logo.png\') 0 100% 100% 0;
}
box-sizing
替代
前提条件
border-bottom-width
= logo.png高度
border-right-width
= logo.png宽度
您的边框图像必须是透明的(可选)
的CSS
.Watermarked {
-moz-border-image: url(\'text/logo.png\') 0 100% 100% 0;
-webkit-border-image: url(\'text/logo.png\') 0 100% 100% 0;
-o-border-image: url(\'text/logo.png\') 0 100% 100% 0;
border-image: url(\'text/logo.png\') 0 100% 100% 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。