背景图练习

最新推荐文章于 2024-05-29 15:38:12 发布

guai_guai_guai

最新推荐文章于 2024-05-29 15:38:12 发布

阅读量35

点赞数

分类专栏： # 前端知识总结文章标签： tensorflow 人工智能 python

本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134341252

版权

前端知识总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

今天我们试着做以下内容吧（图片素材是随便找的，整体视觉效果可能不太好，主要看做法喔）

同样，先创建重置样式和index.css,再在html中引入两个css文件，首先，先在body里插入一张背景图片（background：url（./图片路径）no-repeat）。

背景图

在这里我就先补充一下有关背景图的知识吧

背景图

和img元素的区别

通常，img是属于html概念

背景图属于css的概念

1. 当图片属于网页内容时，必须使用img元素

2. 当图片仅用于美化页面时，必须使用背景图

涉及的css属性

1. background-image

2. background-repeat:no repeat (repeat-x 只是横坐标重复，repeat-y 只是纵坐标重复)

m默认情况下，背景图会在横坐标和纵坐标中进行重复

3. background-size

预设值

contain 等比例全部放置背景图，cover 铺满整个盒子且比例不变，类似于object-fit

background-size:100% 表示横线铺满，纵向按比例缩放

background-size:100% 100% 全部铺满，但比例会变

也可直接写宽高

4. background-position:

设置背景图的位置

预设值：center，right bottom，right,top

数值或百分比

数值：左上

数值代表背景图离盒子的距离

雪碧图(精灵图)spirit：把很多的图标合并成一张图片，利用背景的位置取出单个图标,通常左边和上边为负值

5. background-attachment

通常用它控制背景图是否固定

6. 背景图和背景颜色混用

如果背景图下方未填充完全，此时用背景颜色的话，背景颜色会填充背景图片未覆盖的剩余位置

background-color 属性：该属性定义了元素的背景颜色。如果背景图片不足以填充整个元素，背景颜色会填充剩余的空白区域。

background-image 属性：该属性定义了元素的背景图像。如果背景图片不足以填充整个元素，那么图片将在它能够覆盖的区域内显示，而在剩余区域使用背景颜色。

7. 速写(简写)background

background:url("") no-repeat 50% 50%(center)/100% fixed #000

image repeat position size attachment color

插入背景图时图片尺寸可能不太合适，这时就需要在背景图中设置其属性

/*垂直居中宽度撑满*/
body{
    background: url("../img/背景图3.webp") no-repeat center/100%;
}

如果垂直居中后上面的图片被盖住，而上面的图片较为重要，我们就可以这样设置

/*离上面为0，离左边为0*/
body{
    background: url("../img/背景图3.webp") no-repeat 0 0/cover;
}

导航栏

首先我们就先制作导航栏

创建header 元素，里面再有nav元素（导航），nav里又有六个a元素。

设置header的宽都盒高度，文字垂直居中（line-height），文字颜色，header区域水平居中（margin：0 auto），header背景是用背景图设置的。background：url（“背景图位置及名称'） no-repeat 0 0/100% 100%;因为没有找到适宜的背景图，所以在这里我先用背景颜色代替吧

每个a元素之间有一定宽度，这里我们将a元素浮动起来，并设置每个a元素宽度和高度并设置a元素内的文本居中（text-align：center）

之后我们发现第三个a元素与第四个a元素之间有一定距离，这里距离的设置我们可以用第三个a元素的margin-right来设置，在这里我就用伪类选择器了。

.header nav a:nth-child(3){
    margin-right: 228px;（第三个a元素之后空的的距离）
}

接着设置每个a元素的边框，注意添加box-sizing：border-box（不会增大整个元素的宽高）最后适当调整a元素的宽高到适宜的位置

接着扣扣细节吧，header有上下边框，无左右边框，a元素有左右边框，无上下边框，设置即可

.header nav a{
    border: 2px solid #c27d28;
    float: left;
    width: 160px;
    height: 73px;
    text-align: center;
    box-sizing: border-box;
    border-top: none;
    border-bottom: none;
    color: #fff;

}

header同理。

插入背景图的常见做法

中间空着的位置就用背景图修饰吧，在这里要重新写一个a元素（类名为logo）来放置背景图，可以在a元素里添加一些文字（h1），这里的文字是给浏览器看的（浏览器不看样式，只看html代码，故要告诉浏览器创建一个空间来存放背景图），表示这里有一个元素，之后可以通过隐藏文字来实现只有背景图展现的效果，容易知道中间的logo背景图的位置是相对于header的，故这里要将logo设置为绝对定位，同时适当的设置宽高（logo（a元素）），接着隐藏文字：

.header .logo h1{
    display: none;
}

之后设置背景图：

    background: url("../img/自然风光logo.png") no-repeat;

设置logo垂直居中，left，right均为0；margin：auto ，之后微调上下的位置，导航栏就做好啦！

接下来看下面的menu（两个a元素）同样将该部分类名为menu的div元素作为header的兄弟元素，紧接着放上两个a元素，再对两个a元素分别设置一个类名（detail download）可以在两个a元素里加上一些文字（文字包裹在span元素里，方便设置样式）喔

接着设置两个a元素居中，在这里我用行块盒解决吧，

行块盒居中的方法

：在外层容器设置text-align为center即可，接着将a原宿下移至适当位置，用magin-top设置即可

设置a元素的宽高，隐藏span元素里的文字，再a元素里添加背景图，利用background-position适当调整背景图的位置

效果如图：

接下来设置下面的四个广告（用一个类名为adv的div元素表示），设置四个div（类名：item），div里又有标题（类名为title的div）和图片（类名为img的div），title里又有h2元素，h2包裹了一个a元素a元素里是展示文字img里有一个a元素，a元素里又包裹一个img元素四个div（item）均如此。

设置adv的宽度，四张图片的总宽度，设置adv的margin，上下适宜，左右auto（居中），在这里要想将item们横向排列，我们就让给他们浮动起来就好啦，因为没有设置adv的高度，所以它的高度自动，在这里就得考虑高度坍塌问题（clearfix），在这里我就不详细介绍啦，之间的博客里我有详细介绍过喔

之后设置每个div（item）宽度，高度，再设置title垂直水平居中（linne-height以及text-align），还有背景颜色，文字颜色

单独设置图片的宽高，大概算一下每个item所占宽度

设置每个div（item）的margin-right，但最后一个item没有margin-right，在这里我们就使用伪类选择器。最后再设置每个item的边框即可，注意最好在这里设置边框时使用outline来设置，因为外边框不占据尺寸，不用再去顾虑每个item内容区所占宽度

.adv .item:last-child{
    margin-right: 0;
}

标题下面又有边框（细节），注意box-sizing

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header class="header">
        <nav>
            <a href="">进入官网</a>
            <a href="">账号注册</a>
            <a href="">充值管理</a>
            <a href="">游戏下载</a>
            <a href="">客户中心</a>
            <a href="">官方论坛</a>
        </nav>
        <a href="" class="logo">
            <h1>自然景色</h1>
        </a>
    </header>
    <div class="menu">
        <a href="" class="detail">
            <span>了解详情</span>
        </a>
        <a href="" class="download">
            <span>点击下载</span>
        </a>
    </div>
     <div class="adv clearfix" >
        <div class="item">
            <div class="title">
                <h2>
                    <a href="">快来看看吧</a>
                </h2>
            </div>
            <div class="img">
                <a href="">
                    <img src="./img/自然风光logo.png" alt="">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="title">
                <h2>
                    <a href="">快来看看吧</a>
                </h2>
            </div>
            <div class="img">
                <a href="">
                    <img src="./img/自然风光logo.png" alt="">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="title">
                <h2>
                    <a href="">快来看看吧</a>
                </h2>
            </div>
            <div class="img">
                <a href="">
                    <img src="./img/自然风光logo.png" alt="">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="title">
                <h2>
                    <a href="">快来看看吧</a>
                </h2>
            </div>
            <div class="img">
                <a href="">
                    <img src="./img/自然风光logo.png" alt="">
                </a>
            </div>
        </div>
    </div> 
</body>
</html>

body{
    background: url("../img/背景图3.webp") no-repeat 0 0/cover;
}
.header{
    width: 1198px;
    height: 73px;
    line-height: 73px;
    color: #f8b770;
    background-color:rgba(255, 170, 42, 0.5);
    margin: 0 auto;
    margin-top: 45px;
    border: 2px solid #c27d28;
    border-left: none;
    border-right: none;
    position: relative;
}
.header nav a{
    border: 2px solid #c27d28;
    float: left;
    width: 160px;
    height: 73px;
    text-align: center;
    box-sizing: border-box;
    border-top: none;
    border-bottom: none;
    color: #fff;

}
.header nav a:nth-child(3){
    margin-right: 228px;
}
.header .logo{
    position: absolute;
    width: 238px;
    height: 118px;
    background: url("../img/自然风光logo.png") no-repeat;
    left: 20px;
    right: 0;
    top: -7px;
    margin: auto;
}
.header .logo h1{
    display: none;
}
.menu {
    text-align: center;
    margin-top: 398px;
}
.menu a{
    display: inline-block;
    width: 200px;
    height: 80px;
    background-color: #008c8c;
    background: url("../img/风景.jpg") no-repeat;
    margin-right: 20px;

}
.menu a span{
    display: none;
}
.adv{
    width: 858px;
    margin: 76px auto;
}
.adv .item{
    float: left;
    width: 190px;
    height:100px;
    margin-right: 30px;
    /* border: 2px solid #3f2a22; */
    outline:2px solid #3f2a22 ;
    /* box-sizing: border-box; */
}
.adv .item:last-child{
    margin-right: 0;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.adv .item .title{
    height: 10px;
    line-height: 10px;
    text-align: center;
    background:rgba(213, 125, 9, 0.5);
    color: #fff;
    box-sizing: border-box;
    border-bottom: 2px solid #3f2a2a;
}
.adv .item .img{
    height: 150px;
}
.adv .item .img img{
    width: 190px;
    height: 90px;
}

最终

效果

就是这样啦

guai_guai_guai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
背景图练习

今天我们试着做以下内容吧（图片素材是随便找的，整体视觉效果可能不太好，主要看做法喔）同样，先创建重置样式和index.css,再在html中引入两个css文件，首先，先在body里插入一张背景图片（background：url（./图片路径）no-repeat）。
复制链接

扫一扫