冀教网 - 河北教师网站 - 专注于冀教版课本资源

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 304|回复: 0

css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)

[复制链接]

4万

主题

4万

帖子

12万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
124999
发表于 2020-6-1 09:13 | 显示全部楼层 |阅读模式
1、背景颜色
默认为transparent(透明)
(1)将背景设置为greenyellow:
  1.                                         div{                width: 200px;                height: 150px;                background-color: greenyellow;            }                        今天是星期一
  2.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601072306958-994440672




2、背景图片
  1.                                         div{                width: 200px;                height: 150px;                background-image: url(img/back.jpg);            }                        
  2.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601072929200-1153784475




3、背景平铺
如果要在html页面上对背景进行平铺,可以使用background-repeat属性,属性的值有:repeat、no-repeat、repeat-x、repeat-y,默认情况下是平铺的
(1)平铺:
  1.                                         div{                width: 400px;                height: 300px;                background-image: url(img/back.jpg);                background-repeat: repeat;            }                        
  2.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601073532643-680541857



(2)延x轴平铺:
  1.                                         div{                width: 400px;                height: 300px;                background-image: url(img/back.jpg);                background-repeat: repeat-x;            }                        
  2.    
复制代码
(3)延y轴平铺:
  1.                                         div{                width: 400px;                height: 300px;                background-image: url(img/back.jpg);                background-repeat: repeat-y;            }                        
  2.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601073657632-291694125


4、背景图片的位置
可以使用方位名词(top、center、bottom、left、center、right,如果是方位名词,两个位置名词不区分先后顺序)或者精确单位
(1)方位名词
  1.                                         div{                width: 400px;                height: 300px;                background-image: url(img/back.jpg);                background-repeat: no-repeat;                background-position: center top;            }                        
  2.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601080015940-1028561955



(2)精确单位(xy坐标又先后顺序)
  1.                                         div{                width: 400px;                height: 300px;                background-image: url(img/back.jpg);                background-repeat: no-repeat;                background-position: 25px 40px;            }                        
  2.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601081728424-971161489



(3)混合单位
  1.                                         div{                width: 400px;                height: 300px;                background-image: url(img/back.jpg);                background-repeat: no-repeat;                background-position: center 40px;                background-color: pink;            }                        
  2.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601081941119-1903628541




5、背景固定
background-attachment:当属性的值定义为scroll的时候背景图片随对象的内容滚动;当定义为fixed的时候,背景图片固定
(1)一般的书写方式
  1.                                         body{                width: 400px;                height: 1300px;                background-image: url(img/back.jpg);                background-repeat: repeat;                background-position: center 40px;                color:red;                background-attachment: fixed;                            }                        下雪了!!!
  2.         下雪了!!!
  3.         下雪了!!!
  4.         下雪了!!!
  5.         下雪了!!!
  6.         下雪了!!!
  7.         下雪了!!!
  8.         下雪了!!!
  9.         下雪了!!!
  10.         下雪了!!!
  11.         下雪了!!!
  12.         下雪了!!!
  13.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601083633887-317763500


当滚动鼠标的时候,文字滚动,图片不动
(2)复合性的书写方式:
上面的css代码可以简写为:
  1.                     body{                width: 400px;                height: 1300px;                background: url(img/back.jpg) repeat fixed center 40px;                color:red;                }        
复制代码
没有先后顺序的要求

6、背景颜色半透明
  1.                                         div{                width: 200px;                height: 300px;                background: rgba(0,0,0,0.2);                        }                       半透明显示
  2.    
复制代码
我的关键词 css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透明)  新闻资讯 1392562-20200601085151266-189033909



免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|冀教网 - 河北教师网站 - 专注于冀教版课本资源  

GMT+8, 2020-7-11 16:55 , Processed in 0.344030 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表