CSS核心(十四)设置背景与背景平铺background-repeat属性讲解

[复制链接]
查看: 1085|回复: 31
发表于 2023-1-31 21:05:21 | 显示全部楼层 | 阅读模式
设置背景的属性是:
  1. background-image:url(./img/5.jpg);
复制代码


设置平铺的属性是:
  1. background-repeat:no-repeat;
复制代码


background-repeat有以下四个属性
  1. repeat(平铺)
  2. no-repeat(不平铺 即:如果图片尺寸不足以填满盒子时图片与左上对齐,空白位置保留)
  3. repeat-x(横向平铺,即:仅填充横向空白区域)
  4. repeat-y(纵向平铺,即:仅填充纵向空白区域)
复制代码


背景图片默认状态下是平铺的,请看以下代码:

一、设置背景和设置背景图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景平铺background-repeat属性讲解</title>
</head>

<body>
<style>
        div{
                width:500px;
                height:500px;
                /* 背景颜色:background-color */
                /* background-color:#f00; */
                /* 背景图片:background-image  图片默认是平铺的 
                即:图片尺寸不足以填充盒子尺寸时,下面和左面重复填充该图片 */
                background-image:url(./img/5.jpg);        
        }
</style>
<div>
        背景background相关属性
</div>
</body>
</html>


显示结果为:
CSS核心(十四)设置背景与背景平铺background-repeat属性讲解

二、设置平铺属性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景平铺background-repeat属性讲解</title>
</head>

<body>
<style>
        div{
                width:500px;
                height:500px;
                /* 设置背景平铺:
                background-repeat:repeat;
                repeat(平铺)
                no-repeat(不平铺 即:如果图片尺寸不足以填满盒子时图片与左上对齐,空白位置保留)
                repeat-x(横向平铺,即:仅填充横向空白区域)
                repeat-y(纵向平铺,即:仅填充纵向空白区域) */
                background-color:#abcdef;
                background-repeat:repeat-x;
                background-image:url(./img/5.jpg);
        }
</style>
<div>
        背景background相关属性
</div>
</body>
</html>


显示结果为:

CSS核心(十四)设置背景与背景平铺background-repeat属性讲解

关于平铺的其它属性值在代码中都做了详细的注解,大家可以自己动手练习一下。



易博软件介绍

0

主题

6

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-2-16 17:02:04 | 显示全部楼层
说得是很好啊!不光是在程序员这个行业中适用,在其它的行业中也同样适用!

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-2-23 01:09:50 | 显示全部楼层
是啊!虽然我还是一个学生,没有进入社会,我相信你看法对我是一个很大影响!天外有天,人外有人永远不要认为自己已经学好了不要再学了
发表于 2023-2-27 08:49:47 | 显示全部楼层
韧性和毅力。

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-4 15:13:56 | 显示全部楼层
学习的道路上永远都没有终点!!!
发表于 2023-3-10 22:23:03 | 显示全部楼层
写得真好,是学习的榜样  在失败中认识自己,在失败中寻找自己,在失败中战胜自己.  你的故事给我的感受就是:我们是菜,但我们一定能做的更好

0

主题

22

帖子

12

积分

营销入门

Rank: 2

积分
12
发表于 2023-3-17 00:15:33 | 显示全部楼层
感触很大,谢谢!我是一个VB初学者,向你至敬!  如梦初醒!  感谢

0

主题

19

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-3-22 07:04:00 | 显示全部楼层
学无止尽,多谢楼主,让我们为中国的软件事业做点什么吧!
发表于 2023-3-26 02:43:01 | 显示全部楼层
谢谢,我是幸运的,刚学就看到了这么好的忠告

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-3-29 19:19:57 | 显示全部楼层
我是个初学者现状学的一塌糊涂的.自己感觉没有找到门路和学习方法.还请你指教指教.  看了你的文章打心里佩服你
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表