当前位置: 首页 > news >正文

CSS背景调整

一、设置背景颜色

通过 background-color 属性指定,值可以是十六进制 #ffffff,也可以是rgb(0, 255, 255),或是颜色名称 "red"

div {background-color: red;	/*	通过颜色名称设置	*/background-color: #ff0000;	/*	通过十六进制设置	*/background-color: rgb(255, 0, 0);	/*	通过rgb三原色设置	*/
}

效果如下:请添加图片描述

二、设置背景图片

通过 background-image 属性,结合url()函数指定,图片的位置可以是本地路径,也可以是网络资源路径

body {background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');
}

效果如下:

请添加图片描述

三、设置图片的重复平铺方式

正如刚刚只设置了背景图片,没有设置重复平铺方式,那么当网页缩小时,背景图将向水平方向、垂直方向重复平铺

如:
请添加图片描述

通过 background-repeat 属性设置重复平铺方式,这里简单介绍三种:

no-repeat 不重复平铺

body {background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');/*	不重复平铺	*/background-repeat: no-repeat;
}

效果如下:

请添加图片描述
repeat-x 只在水平方向(x轴)上重复平铺

body {background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');/*	只在水平方向上平铺	*/background-repeat: repeat-x;
}

效果如下:
请添加图片描述
repeat-y 只在垂直方向(y轴)上重复平铺

body {background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');/*	只在垂直方向上平铺	*/background-repeat: repeat-y;}

请添加图片描述

四、设置背景图片的位置

通过 background-position-x 设置背景图的起始x坐标,background-position-y 设置背景图的起始y坐标

body {background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.cNR3IRrOp0ig5dFcUwkwCwHaEo');background-repeat: no-repeat;/*	设置背景图片的坐标	*/background-position-x: 500px;background-position-y: 200px;}

注意:设置图像坐标时,一定要把图像设置为不重复平铺,即background-repeat: no-repeat; 不然图片平铺之后看不出背景图片的位置

效果如下:
请添加图片描述

五、设置背景图片的宽高

通过 background-size 设置背景图片的宽高

/*	设置背景图片的宽度和高度为1024px	*/
background-size: 1024px;
/*	设置背景图片的宽为1024px  高为512px	*/
background-size: 1024px 512px; /*	设置背景图片的宽度和高度为原先的60%	*/
background-size: 60%;
/*	设置背景图片的宽为60%  高为40%	*/
background-size: 60% 40%; 

http://www.mrgr.cn/news/50070.html

相关文章:

  • 【Pycharm系列】如何使用Windows的pycharm来远程连接linux做开发?
  • 架构师之路-学渣到学霸历程-12
  • Android Studio简易项目|随机选择器(类似转盘)
  • 获取京东商品历史价格接口item_history_price介绍
  • 最大化似然估计?你知道什么叫”似然“吗?
  • Spring 实现 3 种异步流式接口,干掉接口超时烦恼
  • 预训练模型的使用方法
  • 如何在node.js中做快速傅立叶变换-(频谱)
  • SLAM中的加权最小二乘法
  • 解析:ARM 工业计算机在光伏储能中的关键作用
  • Skywalking介绍,Skywalking 9.4 安装,SpringBoot集成Skywalking
  • gbase8s之建表相关问题
  • C语言:在Visual Studio中使用C语言scanf输入%s出现的栈溢出问题
  • 量子噪声与量子操作
  • 谷歌浏览器主题和皮肤设置教程
  • Jetpack-ViewModel+LiveData+DataBinding
  • docker删除容器要怎么操作?如何保障容器安全!
  • leetcode哈希表(二)-两个数组的交集
  • 图新地球移动端(外业精灵)产品入门指南
  • js的基础问题