文档章节

CSS3背景相关样式

Akillua
 Akillua
发布于 2017/07/27 10:50
字数 514
阅读 4
收藏 0

background-image绘制多张图片叠加,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-image绘制多张图片叠加</title>
    <style>
        div{
            width:1100px;
            height:800px;
            background-image: url("../../image/icon1.jpg"),url("../../image/border3.jpg");
            background-repeat: repeat-x,no-repeat ;
            background-position:100%,100%,center,center;
            border:5px solid #ff0000;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
background-clip:规定背景的绘制区域:
background-origin:相对于内容框来定位背景图像:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-clip及background-origin属性</title>
    <style>
        /*background-clip:规定背景的绘制区域:*/
        /*background-origin:相对于内容框来定位背景图像:*/
        div{
            background: #fff000;
            font-size: 30px;
            border:10px dashed #0000ff;
            padding:20px;
            background-image: url("../../image/icon.png");
            background-repeat:no-repeat;
        }
        .div2{
            margin-top:30px;
            background-origin: content-box;
            background-clip: content-box;
        }
        .div3{
            margin-top:30px;
            background-origin: border-box;
            background-clip: border-box;
        }
        .div4{
            margin-top:30px;
            background-origin: padding-box;
            background-clip: padding-box;
        }
    </style>
</head>
<body>
<div>这是一段测试文字</div>
<div class="div2">这是一段测试文字</div>
<div class="div3">这是一段测试文字</div>
<div class="div4">这是一段测试文字</div>
</body>
</html>

 css3的box-shadow属性:

让ie6、7、8都支持border-radius 、box-shadow、text-shadow的方法:用ie-css3.htc

首先下载ie-css3.htc脚本,然后在css中加入:

它的使用方法是:下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

.box{
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */ 
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ 
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ 
behavior: url(ie-css3.htc); 
}

注意:behavior: url(ie-css3.htc) 中的ie-css3.htc地址用绝对路径或者直接传到网站的根目录下面,要不然可能会看不到效果。

•当你使用了这个htc文件后,你的CSS里面,只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种,IE就会渲染。
•当使用了这个htc文件后,你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
•不支持RGBA值中的alpha透明度。
•不支持inset内阴影。
•不支持阴影扩展。
•阴影在IE中只会显示为黑色,不管你设置成其它什么颜色。
但是,这个脚本了仅仅是让IE支持了部份的box-shadow值。

© 著作权归作者所有

Akillua
粉丝 0
博文 43
码字总数 19935
作品 0
郑州
私信 提问
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

产品哥
2011/12/02
0
1
css3简单知识学习

CSS3简单学习 倾斜div div { transform:rotate(30deg); } css3圆角边框 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; / Old Firefox / } 边框阴影 div { box-shad......

writeademo
2016/08/02
16
0
论:img和background-image的各种区别

background-image是背景图片,是css的一个样式 <img />是一个块状元素,它是一个图片,是html的一个标签 background-image是只能看的 <img />是一个document对象,它是可以操作的。比如更换i...

_大雁
2013/06/13
0
0
《web前端最佳实践》—高性能css

** 高性能css **作者新浪微博 @灵感_idea Html和css本身的性能问题并不突出,在提高可读性和可维护性的前提下,如果能让代码运行和解析的速度更快,则是锦上添花了。 一、使用高效css选择器 ...

十万猛虎下画山
2016/07/27
12
0
CSS(一) CSS背景

CSS背景 ---------- 既有css3之前的用法也有css3的用法,没有区分出来哈,我想要速成就没有管这个。 CSS设置背景颜色:属性background-color,这个属性的作用范围是,background-color 属性为...

年少爱追梦
2016/06/08
45
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins基础入门-5-用户和权限管理

本篇,我们来介绍下Jenkins上如何创建用户,以及如何管理用户,和那些用户可以有ProjectA的权限。这个很好理解,一个项目,有开发和测试,和运维,每个团队都有不同的角色,例如有测试经理和...

shzwork
8分钟前
0
0
linux上解压版安装jdk,tomcat

需要的安装包 1.vmware12 2.centos7版本 3.安装完成后需要xshell来连接远程虚拟机,虚拟机保证要联网,网络畅通。 4.xftp用来向linux传输文件用,一般来说xshell和xftp配套使用 5.对应的压缩...

architect刘源源
44分钟前
24
0
使用 spring 的 IOC 解决程序耦合

工厂模式解耦 在实际开发中我们可以把三层的对象都使用配置文件配置起来,当启动服务器应用加载的时候,让一个类中的方法通过读取配置文件,把这些对象创建出来并存起来。在接下来的使用的时...

骚年锦时
今天
2
0
group by分组后获得每组中时间最大的那条记录

用途: GROUP BY 语句用于 对一个或多个列对结果集进行分组。 例子: 原表: 现在,我们希望根据USER_ID 字段进行分组,那么,可使用 GROUP BY 语句。 我们使用下列 SQL 语句: SELECT ID,US...

豆花饭烧土豆
今天
3
0
android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部