CSS背景设置代码示例

CSS背景颜色设置

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>背景颜色</title>
<style>
div {
width: 200px;
height: 200px;
/* 背景颜色 */
/* background-color: blue;
transparent是默认值 透明的 */

/* 背景图片 */
/* background-image: url();
url() 括号里面填写图片地址
默认none没有背景图片*/

/* 背景不平铺 */
/* background-repeat: no-repeat; */
/* 默认背景平铺 */
/* 沿着X轴/Y轴平铺 */
/* background-repeat: repeat-x;
background-repeat: repeat-y; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

CSS背景图片设置

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>背景图片位置</title>
<style>
h3 {
width: 200px;
height: 50px;
background-image: url(./csdn.png);
background-repeat: no-repeat;
/* 背景图片位置 */
/* 背景位置方位名词 */
background-position: center left;
/* 方位名词部分顺序,只写一个另一个默认居中 */
/* background-position: 20px 30px; */
/* 精确位置第一个是X轴第二个是Y轴 */

/* 背景图像固固定 */
/* background-attachment: fixed; */
/* 默认scroll 背景图片跟随对象内容滚动 */

/* 背景复合性写法 */
/* background: transparent url() repeat fixed top;
color image repeat fixed position
颜色 图片 平铺 滚动 位置 */

text-indent: 10em;
line-height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h3>csdn</h3>
</body>
</html>

CSS背景色透明度设置

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>背景色半透明</title>
<style>
div {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.5);
/* 0.5代表透明度是50% */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

————下载必看————

1、资源通过互联网渠道公开获取,仅供阅读测试,请在下载后24小时内删除,谢谢合作!
2、本站解压密码统一为:yudouyudou
3、本站微信客服/失效补发:rsst58
4、若版权方认为本站侵权,请联系发邮件至(rsstime@qq.com)处理。
5、关于下载,播放声音字幕,解压等问题,请点击查看>>常见问题
时光屋 » CSS背景设置代码示例

发表评论

至臻视听_发烧收藏

会员介绍 常见问题