有关于背景的一些东西

最新推荐文章于 2024-04-04 12:00:09 发布

叫我邱球球

最新推荐文章于 2024-04-04 12:00:09 发布

阅读量453

点赞数

分类专栏：有关CSS 文章标签：背景属性 css 心得前端

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/58612116

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

①如何设置背景颜色？

在CSS中，background-color就是专门设置背景颜色的。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        .box{
            background-color: red;
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
        <div class="box">
        </div>
</body>
</html>

--------------------------------------------------------分割线--------------------------------------------------------

②背景图片：

语法格式为：

background-img:url(); （括号中既可以写本地地址也可以写网络地址）

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        .box{
            width:300px;
            height:300px;
            background-image: url(http://img5q.duitang.com/uploads/blog/201408/10/20140810150333_3mZzT.thumb.224_0.jpeg);
        }
    </style>
</head>
<body>
        <div class="box">
        </div>
</body>
</html>

（此处为网络地址）

--------------------------------------------------------分割线--------------------------------------------------------

③背景平铺：

如果没有特殊的情况下，插入背景图片，如②所示，在横纵方向都是会平铺的。

所以我们如何控制背景图片是否需要平铺呢？

这就需要一个特殊的属性：background-repeat: ;

有四个属性：

background-repeat: repeat; 就会横纵方向平铺

background-repeat:no-repeat; 不会横纵方向上平铺

background-repeat: repeat-x; 仅仅在x方向平铺

background-repeat:repeat-y; 仅仅在y方向平铺

这就给我们了一个给整个网页做背景的思路：可以照一张体积比较小的图片，然后在整个页面上进行平铺，这样就会提升页面打开的速度。

背景图片background-image和背景颜色background-color可以同时存在，并且背景图片会覆盖背景颜色。

--------------------------------------------------------分割线--------------------------------------------------------

④背景定位

如何控制背景图片的位置呢？

background-position:水平方向垂直方向; 这个就是专门用来控制背景图片的位置的。

取值：

1.方向名次

水平方向：left center right

垂直方向：top center bottom

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        div{
            width:500px;
            height:500px;
        }
        .box{
            border: 3px solid red;
            margin: auto;
            background-image:url(22.JPG);
            background-repeat: no-repeat;
            background-color: red;
            background-position: left center;
        }
    </style>
    <!--<link type="text/css" rel="stylesheet" href="style/reset.css">-->
</head>
<body>
        <div class="box"></div>
</body>
</html>

2.像素

像素也要按照【background-position:水平方向垂直方向; 】来具体设置值。

指的注意的是：用像素设置值得时候是可以设置负值的。

--------------------------------------------------------分割线--------------------------------------------------------

⑤ 背景图片和插入图片的区别：

1.背景图片只是作为一个背景来使用，可以在背景图片上面写上一些文字。但是插入的图片却是占用一个位置，不可以在插入的图片上面写文字。

2.背景图片可以通过background-position来随意改变他的位置，但是插入的图片不可以随便改动。

--------------------------------------------------------分割线--------------------------------------------------------

技巧：

图片拼接就用div的嵌套

--------------------------------------------------------分割线--------------------------------------------------------

叫我邱球球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关于背景的一些东西

①如何设置背景颜色？在CSS中，background-color就是专门设置背景颜色的。例如：背景 .box{ background-color: red; width:300px; height:300px; }
复制链接

扫一扫