学习CSS的background属性及其取值（实践）

CSS的背景属性

属性	描述	可用值
background	设置背景的所有控制选项	其他背景属性可用值的集合
background-color	设置背景颜色	命名颜色、十六进制颜色等
background-image	设置背景图片或渐变填充	url(URL)或渐变属性值
background-repeat	设置背景图片的平铺方式	repeaat、no-repeat、repeat-x、repeat-y
background-attachment	设置背景图片固定还是随内容滚动	scroll、fixed
background-position	设置背景图片显示的起始位置	【left、center、right】、【top、center、bottom】、【x%、y%】、【x-pos】【y-pos】

实践

注意：将下面代码中的图片路径换成自己的图片路径就可以实现相同效果

练习一

实现图文混排，图为背景

<!--* @Author: OriginalCoder* @Date: 2020-10-21 15:48:07* @version: * @LastEditTime: 2020-10-21 16:55:45* @LastEditors: OriginalCoder* @Description:
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>body {background-color: #eadece;background-image: url("./image/sina.jpg");background-repeat: no-repeat;background-position: right bottom;/* background-attachment: fixed; */}</style></head><body><h3>十二生肖两两相对，六道轮回</h3><p>第一组是鼠和牛，老鼠代表智慧，牛代表勤奋，智慧和勤奋一定要紧密结合在一起，如果光有智慧不勤奋，那就是小聪明，光是勤奋不动脑筋，那就是愚蠢</p><p>第二组是虎和兔，老虎代表勇猛，兔子代表谨慎，勇猛和谨慎只有结合在一起才能做到胆大心细，如果勇猛离开了谨慎就变成了鲁莽，而光有了心细就不可能有更多的收获……</p><p>第三组是龙和蛇，龙代表刚猛，蛇代表柔韧，所谓刚者易折，而仅有柔的一面就容易失去主见，所以刚柔并济才是最好的选择……</p><p>第四组是马和羊，马代表勇往直前，羊代表柔顺，如果一个人只顾直奔目标，不顾及周边环境，必然会和周边事物不断的磕碰，最后不见得会成功，如果光有柔顺，她可能连方向也没有，所以勇往直前的秉性要和和顺的性格结合在一起，才能超越</p><p>第五组是猴和鸡，猴子代表灵活，善变能力强，鸡定时打鸣，代表恒定，如果光灵活但做不到恒定的话，再好的计划也会泡汤，所以要一方面要保持稳定性保持整体的和谐和秩序良好，另一方面又能在变通中前进，这才是最厉害的做法</p><p>第六组也是最后一组那就是狗和猪，狗代表忠诚，猪代表随和，如果一个人太忠诚不懂得随和，就会排斥他人，反过来一个人太随和却不忠诚，那么这个人就会失去原则，所以一定要将忠诚和随和结合在一起，这样才能保持自己内心深处的平衡如果我们能够做到十二生肖两两相对原理中的任何一条，我们就应该能获得更多的</p></body>
</html>

练习二

诗词的背景混排

<!--* @Author: OriginalCoder* @Date: 2020-10-21 15:48:07* @version: * @LastEditTime: 2020-10-21 17:00:14* @LastEditors: OriginalCoder* @Description:
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>.box {margin: 0 auto;border-radius: 30px;background-image: url("../ClassCode/水调歌头/yuese.jpg");background-repeat: no-repeat;background-position: 50% 50%;height: 485px;width: 750px;}.shici {position: relative;top: 85px;text-align: center;font-weight: bold;}.title {font-size: 30px;color: #84deff;}.content {margin-top: 30px;line-height: 30px;color: #84deff;}</style></head><body><div class="box"><!-- <img src="../ClassCode/水调歌头/yuese.jpg" alt="" /> --><div class="shici"><div class="title">水调歌头</div><div class="content">明月几时有？把酒问青天。<br />不知天上宫阙，今夕是何年。<br />我欲乘风归去，又恐琼楼玉宇，高处不胜寒。 <br />起舞弄清影，何似在人间。 <br />转朱阁，低绮户，照无眠。 <br />不应有恨，何事长向别时圆？ <br />人有悲欢离合，月有阴晴圆缺，此事古难全。 <br />但愿人长久，千里共婵娟。 <br />——苏轼</div></div></div></body>
</html>

练习三

实现对联的排列效果

方法一

仅使用background-position来实现

<!--* @Author: OriginalCoder* @Date: 2020-10-21 15:48:07* @version: * @LastEditTime: 2020-10-21 17:11:31* @LastEditors: OriginalCoder* @Description:
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>.left {height: 927px;background: url("./left.jpg") no-repeat;/* background-position: ; */background-position: left top;}.top {height: 169px;/* width: 488px; */background: url("./top.jpg") no-repeat;background-position: center top;/* margin-top: -927px; */}.right {height: 927px;/* width: 217px; */background: url("./right.jpg") no-repeat;background-position: right top;/* margin-top: -200px; */}.bottom {height: 375px;/* width: 374px; */background: url("./bottom.jpg") no-repeat;background-position: center center;/* margin: -550px auto; */}</style></head><body><div class="left"><div class="top"><div class="right"></div></div><div class="bottom"></div></div></body>
</html>

方法二

background属性和margin混合使用

<!--* @Author: OriginalCoder* @Date: 2020-10-21 15:48:07* @version: * @LastEditTime: 2020-10-21 17:13:37* @LastEditors: OriginalCoder* @Description:
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>.left {height: 927px;background: url("./left.jpg") no-repeat;/* background-position: left top; */}.top {height: 169px;/* width: 488px; */background: url("./top.jpg") no-repeat;background-position: center top;margin-top: -927px;}.right {height: 927px;/* width: 217px; */background: url("./right.jpg") no-repeat;background-position: right top;margin-top: -169px;}.bottom {height: 375px;width: 374px;background: url("./bottom.jpg") no-repeat;background-position: center center;margin: -550px auto;}</style></head><body><div class="box"><div class="left"></div><div class="top"></div><div class="right"></div><div class="bottom"></div></div></body>
</html>

练习四

实现点亮武汉，鼠标移动到图片上，将会发生颜色变化

<!--* @Author: OriginalCoder* @Date: 2020-10-21 15:48:07* @version: * @LastEditTime: 2020-10-21 16:35:25* @LastEditors: OriginalCoder* @Description:
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>body {height: 90%;width: 90%;margin: 0 auto;}.box {margin-left: 400px;width: 500px;height: 500px;background-size: cover;background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qODWdSDKJgxCzCab49zGfngsibQ3ibG3wo43iaubNNgwGt2g7ANIicxwQcg/640?wx_fmt=jpeg");}.box:hover {background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qX5cotNibgRrj4fKZkJ5vWD6LgOW0fCDIEdsSfKRMnZIpfDzDPVteL9g/640?wx_fmt=jpeg");transition: all 5s;}</style></head><body><div class="box"></div></body>
</html>

学习CSS的background属性及其取值（实践）相关推荐

纯色html背景,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
【java】在jsp的js和css里面使用EL表达式取值|style里面用$取值
众所周知,如果直接在jsp的js或者css语句块里面写${***}取值的话,程序会不识别这玩意,但是,我们有时候确实需要动态取值,比如,js为了获得对象的某一个值,不方便用js的getElementB ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
Android自定义控件增加xml标签属性、取值等
Android中常常用到写自己的控件来满足自己的开发需求,自定义控件在布局中使用的时候,如何增加标签属性来配置控件属性,又如何在控件中使用自己添加的属性一.在资源文件中配置标签属性在资源文件res ...
python学习-数据类型（列表→创建、取值、大小、长度）
数据类型列表(list) 列表的创建列表的取值(划重点) 列表的大小和长度列表(list) 列表的创建列表的创建很简单,使用中括号.理论上中括号里面的值是任意类型,上代码: lst1 = [1 ...
CSS 背景 background属性
背景是创建更有趣味的网页的常用一种手法,无论是直接使用背景颜色,还是使用背景图像,都能给网页带来丰富的视觉效果. 在CSS1中,就提供了对背景的控制,并提供了 5 个background相关的属性,用 ...
超链接target属性的取值和作用
属性取值 1)_blank:在新浏览器窗口中打开链接文件 2)_parent:将链接的文件载入含有该链接框架的父框架集或父窗口中.如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件 3 ...
css的background属性
背景background属性如下: background:设置或检索对象的背景特性 background-color:设置或检索对象的背景颜色 background-image:设置或检索对象的背景图 ...

学习CSS的background属性及其取值（实践）

CSS的背景属性

实践

练习一

练习二

练习三

方法一

方法二

练习四

学习CSS的background属性及其取值（实践）相关推荐

最新文章

热门文章