css复习——背景background day2

最新推荐文章于 2024-08-08 08:56:38 发布

wangyuanti

最新推荐文章于 2024-08-08 08:56:38 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/wangyuanti/article/details/77938154

版权

0628

背景

背景颜色
backgroud-color
背景图片
backgroud-image
背景图平铺
repeat 平铺（默认值）no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺
背景图位置
background-position
第一个值 X轴 num center left right
第二个值 Y轴 num center top bottom
背景图是否滚动
background-attachment
fixed 固定
位置是以浏览器的可视区域来定位
不会随着页面的滚动而改变自身的位置
scroll 滚动
位置是以容器来定位
会随着页面的滚动而改变自身的位置
例如：

 #box{
            width:500px;
            height:300px;
            background-color: #0b9380;
            background-image: url(img/pm0025.jpg);
            background-repeat: no-repeat;
            background-position:right bottom;
            background-attachment: scroll;
        }

复合样式：

 #email{
            width:298px;
            height: 57px;
            background:#0b9380 url(img/email.png) no-repeat 16px 25px fixed;
        }

border区域会不会显示背景图？
如果背景图平铺会显示
如果不平铺不会显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:300px;
            height:200px;
            border:10px dotted #0c0c0c;
            background: url("img/14.jpg") repeat-x;
            margin:40px 30px 20px 10px;
        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

wangyuanti

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css复习——背景background day2

0628背景背景颜色 backgroud-color 背景图片 backgroud-image 背景图平铺 repeat 平铺（默认值）no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺背景图位置 background-position 第一个值 X轴 num center left right 第二个值 Y轴 num
复制链接

扫一扫