CSS调整背景

一、设置背景颜色

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

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

效果如下:

二、设置背景图片

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

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

效果如下:

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

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

如:

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

no-repeat 不重复平铺

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

效果如下:

repeat-x 只在水平方向(x轴)上重复平铺

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

效果如下:

repeat-y 只在垂直方向(y轴)上重复平铺

css 复制代码
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坐标

css 复制代码
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; 不然图片平铺之后看不出背景图片的位置

效果如下:

相关推荐
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程6 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot