基本背景属性の使用

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景属性</title><style type="text/css">div {border: 1px solid #000;height: 100px;width:  300px;}</style></head><body><!--绿色背景--><div style="background-color:#92e900;">background-color:#92e900</div><!--以默认样式指定背景图片，将会在横向、纵向上平铺--><div style="background-image:url(dog.jpg);">background-image:url(dog.jpg)</div><!--不平铺的背景图片--><div style="background-image:url(dog.jpg);background-repeat:no-repeat;">background-image:url(dog.jpg)background-repeat:no-repeat</div><!--仅横向平铺的背景图片--><div style="background-image:url(dog.jpg);background-repeat:repeat-x;">background-image:url(dog.jpg)background-repeat:repeat-x</div><!--不平铺的背景图片，并指定背景图片位置--><div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:35% 80%;">background-image:url(dog.jpg)background-repeat:no-repeatbackground-position:35% 80%</div><!--不平铺的背景图片，并指定背景图片位置--><div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:30px 8px;">background-image:url(dog.jpg)background-repeat:no-repeatbackground-position:30px 8px</div><!--不平铺的背景图片，并指定背景图片位置--><div style="background-image:url(dog.jpg);background-repeat:no-repeat;background-position:center bottom;">background-image:url(dog.jpg)background-repeat:no-repeatbackground-position:center bottom</div></body>
</html>

背景图片的固定

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景固定</title></head><body style="background-image:url(dog.jpg); background-attachment:fixed"><ul style="font-size:30pt;color:red"><script type="text/javascript">for (var i = 0; i < 20; i++) {document.writeln("<li>这柴犬颜色有点深啊</li>");}</script></ul></body>
</html>

CSS3新增的background-clip属性の使用

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景属性</title><style type="text/css">div {border:  10px dotted #444;padding: 12px;height:  30px;width:   300px;}</style></head><body><!--粉色背景--><div style="background-color:#ff6aa1;">background-color:#ff6aa1</div><!--以默认样式指定背景图片，将会在横向、纵向上平铺--><div style="background-image:url(dog.jpg);">background-image:url(dog.jpg)</div><!--指定背景覆盖盒模型的边框区、内填充区、内容区--><div style="background-image:url(dog.jpg);background-clip:no-clip;">background-image:url(dog.jpg)background-clip:no-clip</div><!--指定背景覆盖盒模型的内填充区、内容区--><div style="background-image:url(dog.jpg);background-clip:padding-box;">background-image:url(dog.jpg)background-clip:padding-box</div><!--指定背景覆盖盒模型的内容区--><div style="background-image:url(dog.jpg);background-clip:content-box;">background-image:url(dog.jpg)background-clip:content-box</div></body>
</html>

CSS3新增的background-origin属性の使用

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景属性</title><style type="text/css">div {border: 12px dotted #444;height: 120px;width:  300px;}</style></head><body><!--柚色背景--><div style="background-color:#ff6a51;">background-color:#ff6a51</div><!--背景图片从内容区开始覆盖--><div style="background-image:url(dog.jpg);background-origin:content-box;background-repeat:no-repeat;">background-image:url(dog.jpg)background-origin:content-boxbackground-repeat:no-repeat</div><!--背景图片从内填充区开始覆盖--><div style="background-image:url(dog.jpg);background-origin:padding-box;background-repeat:no-repeat;">background-image:url(dog.jpg)background-origin:padding-boxbackground-repeat:no-repeat</div><!--背景图片从边框区开始覆盖--><div style="background-image:url(dog.jpg);background-origin:border-box;background-repeat:no-repeat;">background-image:url(dog.jpg)background-origin:border-boxbackground-repeat:no-repeat</div></body>
</html>

CSS3新增的background-size属性の使用

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景属性</title><style type="text/css">div {border: 12px dotted #444;height: 70px;width:  300px;}</style></head><body><!--以默认样式指定背景图片，将会在横向、纵向上平铺--><div style="background-image:url(dog.jpg);">background-image:url(dog.jpg)</div><!--背景图片宽度与元素宽度相同、高度为元素高度的80%--><div style="background-image:url(dog.jpg);background-size:100% 80%;">background-image:url(dog.jpg)background-size:100% 80%</div><!--背景图片宽度为元素宽度的30%、高度保持纵横比缩放--><div style="background-image:url(dog.jpg);background-size:30% auto">background-image:url(dog.jpg)background-size:30% auto</div><!--背景图片宽度保持纵横比缩放、高度为元素高度的50%--><div style="background-image:url(dog.jpg);background-size:auto 50%;">background-image:url(dog.jpg)background-size:auto 50%</div><!--背景图片宽度为60px、高度为30px--><div style="background-image:url(dog.jpg);background-size:60px 30px;">background-image:url(dog.jpg)background-size:60px 30px</div><!--背景图片宽度为40px、高度保持纵横比缩放--><div style="background-image:url(dog.jpg);background-size:40px auto;">background-image:url(dog.jpg)background-size:40px auto</div><!--背景图片宽度保持纵横比缩放、高度为20px--><div style="background-image:url(dog.jpg);background-size:auto 20px;">background-image:url(dog.jpg)background-size:auto 20px</div></body>
</html>

CSS3为background-repeat新增的space和roundの使用

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景属性</title><style type="text/css">div {height: 150px;width:  300px;background-image:url(dog.jpg);}</style></head><body>换行警告<!--以默认样式指定背景图片，将会在横向、纵向上平铺--><div>background-image:url(dog.jpg)</div>换行警告<!--不平铺的背景图片--><div style="background-repeat:round;">background-image:url(dog.jpg)background-repeat:round</div>换行警告<!--仅横向平铺的背景图片--><div style="background-repeat:space;">background-image:url(dog.jpg)background-repeat:space</div></body>
</html>

CSS3新增的多背景图片の使用

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html" ;charset="utf-8"/><title>背景属性</title><style type="text/css">div {border:1px solid #000;height:200px;width:500px;background-image: url(dog.jpg), url(dog2.jpg), url(dog3.jpg);background-repeat: repeat-y, repeat-x, repeat;background-position: center top, left bottom, left top;}</style></head><body><div id="div"></div></body>
</html>

图片使用——柴犬

dog.jpg

dog2.jpg

dog3.jpg

【CSS3】CSS3背景相关属性大全相关推荐

  1. CSS3单词及属性大全

    CSS3属性大全 0~9text:文本; /**/decoration:装饰,修饰; /**/none:没有,无,没有东西地; /**/list:列表; /**/style:样式; /**/persp ...

  2. 【CSS3】CSS3文本相关属性大全

    说明 本文的"文本"相关属性控制的是整段.整个div内文本的显示效果,包括文本文字的缩进.段内文字的对齐方式.文本中空白字符的处理等等,需要掌握. 网页源码 <!DOCTYP ...

  3. CSS3新增属性大全！

    1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: -moz- Opera: -o- 1. ...

  4. CSS3 动画实现方法大全

    常用效果总结(需要引用animate.css) <!doctype html> <html lang="en"><head><meta c ...

  5. 浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置

    声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...

  6. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  7. css3 filter url,CSS3 filter(滤镜) 属性

    CSS3 filter(滤镜) 属性 实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safa ...

  8. 在less中不能正常使用css3的calc属性的解决方法

    在less中不能正常使用css3的calc属性的解决方法 参考文章: (1)在less中不能正常使用css3的calc属性的解决方法 (2)https://www.cnblogs.com/zhaozh ...

  9. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

最新文章

  1. STARTUP报错：ORA-00205: error in identifying control file, check alert log for more info
  2. 溃不成军：科通芯城一度再跌近30% 股价三天腰斩
  3. 如何更改微信标签名字_微信透明昵称代码复制
  4. Ⅰ：zookeeper的单机安装 - 详细教程
  5. sqlserver查询补全时间_mssql 按日期分组（group by）查询统计的时候，没有数据补0的解决办法...
  6. gitlab mr wip 怎么弄成_基于GitLab的工作流程设计
  7. E2: A Framework for NFV Applications, SOSP' 15
  8. php session 加密,php session cookie加密实例
  9. python能做的java能做吗_java – Jython不能做什么Python？
  10. oracle客户端添加sqlldr
  11. 官方win10安装教程，win10系统一键安装方法
  12. 电影《道士下山》主创亮相 董琦：转身遇贵人
  13. 同相加法器电路图_反相加法器电路图_运放加法器电路图解析
  14. Minecraft整合包 [GTNH]格雷科技:新视野 服务器搭建教程
  15. MYSQL 查询某个月有多少天数?
  16. 2022-2028全球与中国不锈钢毛细管柱市场现状及未来发展趋势
  17. Win7系统安装教程【附Win7/64位系统下载地址】
  18. jfinal的简单使用(一)
  19. 拼多多非标品如何推广？场景推广合适哪些产品？
  20. DAEMON Tools Ultra(虚拟光驱超级版)v5.5.0.1046免费版

热门文章

  1. 笔记41 Spring Web Flow——Demo
  2. Hungary（匈牙利算法）——二分图最大匹配
  3. ramdisk根文件系统+initramfs
  4. VS2008 快捷键 大全
  5. MySQL_日期时间处理函数及应用
  6. string赋值-单引号和双引号的区别（php）
  7. 电脑字体模糊_小红书上传视频模糊？做小红书视频99%的工具都在这了
  8. 光绘文件 c语言 解析,AltiumDesigner输出光绘文件
  9. 华为8545m5补全shell_华为hs8145v5 改华为界面和默认超密（一）
  10. windows dc linux,active-directory – Linux AD集成,使用Windows Server 2012 DC时无法登录