HTML背景图片的使用说明与应用

最新推荐文章于 2022-07-29 13:22:51 发布
最新推荐文章于 2022-07-29 13:22:51 发布
阅读量3.7k 收藏 51
点赞数 9
分类专栏： HTML与CSS5网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45696288/article/details/108550084
版权

如何使用一张图片当作背景呢？？？

首先先在body标签里面随便写一个双列标签，比如下面的div标签：

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

然后创建一个style标签，写CSS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

        <style>

                div{
                    width: 120px;
                     height: 60px;
                     border: 5px solid crimson;
                     padding: 300px;
                }

        </style>

</head>

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

</html>

在这里插入图片描述

上面的style标签中的div中写的创建了一个块

   margin: 10px auto;

上面代码将块在网页中居中显示，然后开始在这个块中插入背景图片：
插入的方法就是引入一个新属性：

        <style>

                div{
                    width: 120px;
                     height: 60px;
                     border: 5px solid crimson;
                     padding: 300px;
                     margin: 10px auto;
                     background-image: url(images/dilireba.jpg);
                }

        </style>

在这里插入图片描述
上面的background-image:url（）属性是将图片通过路径引进来
但是这样的背景是不是不尽人意呢？

        <style>

                div{
                    width: 120px;
                     height: 60px;
                     border: 5px solid crimson;
                     padding: 300px;
                     margin: 10px auto;
                     background-image: url(images/dilireba.jpg);
                     background-repeat: no-repeat;
                }

        </style>

在这里插入图片描述
发现上面的背景图片按照实际大小显示在了块中的左上角，因为background-repeat: no-repeat;的属性就是让背景图片不进行延伸（延展）。
提到这里再介绍两个相似的属性：

background-repeat: repeat-x;

在这里插入图片描述
上面的是沿着x轴的方向进行延伸。同理：

background-repeat: repeat-y;

在这里插入图片描述
上面的是沿着y轴进行延展的。
继续向下进行：

        <style>

                div{
                    width: 120px;
                     height: 60px;
                     border: 5px solid crimson;
                     padding: 300px;
                     margin: 10px auto;
                     background-image: url(images/dilireba.jpg);
                     background-repeat: no-repeat;
                     background-attachment:scroll;
                }

        </style>

注意：
上面的 background-attachment:scroll;属性是保证在上下滑动网页的同时，背景图片也同时上下滑动，而如果换成background-attachment:fixed;属性，那么背景图片是固定在网页上不变的。（可以自行调试，这里不做演示）。

对于上面的背景图片，设置的依然不够美观，那么能不能将背景图片居中在块中呢？

        <style>

                div{
                    width: 120px;
                     height: 60px;
                     border: 5px solid crimson;
                     padding: 300px;
                     margin: 10px auto;
                     background-image: url(images/dilireba.jpg);
                     background-repeat: no-repeat;
                     background-attachment:scroll;
                     background-position: center;
                }

        </style>

在这里插入图片描述

上面的background-position: center;属性就是将其居中，当然，我们不一定非要将图片居中，可以自己设置图片所在的区域范围：

        <style>

                div{
                    width: 120px;
                     height: 60px;
                     border: 5px solid crimson;
                     padding: 300px;
                     margin: 10px auto;
                     background-image: url(images/dilireba.jpg);
                     background-repeat: no-repeat;
                     background-attachment:scroll;
                     /* background-position: center; */
                     background-position: 100px 80px;
                }

        </style>

在这里插入图片描述
如上面的自己进行设置距离左边距与上边距的像素距离。

对于上面的多个属性，可以合一进行使用：
background: url(images/dilireba.jpg) no-repeat scroll 200px 130px;
上面的等价于一条一条的写出，注意书写的顺序

综上代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

        <style>

                div{
                     width: 120px;
                     height: 60px;
                     border: 5px solid crimson;
                     padding: 300px;
                     margin: 10px auto;
                     background-image: url(images/dilireba.jpg);
                     background-repeat: no-repeat;
                     /* background-repeat: repeat-x; */
                     /* background-repeat: repeat-y; */
                     background-attachment: scroll;
                     /* background-position: center; */
                     background-position: 100px 130px;
                     /* background: url(images/dilireba.jpg) no-repeat scroll 200px 130px; */
                }

        </style>

</head>

<body>
    
        <div>迪丽热巴</div>

</body>

</html>

上面方法的举例：

给出下面的一张图片：
在这里插入图片描述
如何将上面的图片转变成下面的样式：
在这里插入图片描述

方案1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 88px;
            height: 100px;
            /* border: solid springgreen; */
            background-image: url(images/peach.png);
            float: left;
        }

        span {

            width: 88px;
            height: 100px;
            /* border: solid springgreen; */
            background-image: url(images/peach.png);
            background-repeat: repeat-x;
            margin: 30px;
            /* margin-left: 100px; */
            /* margin-top: 2px; */
            float: left;
        }
    </style>

</head>

<body>

    <div></div>
    <span></span>
</body>

</html>

方案2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 

    <style>
        div {
            width: 88px;
            height: 100px;
            /* border: solid springgreen; */
            background-image: url(images/peach.png);
            float: left;
        }

        span {

            width: 88px;
            height: 100px;
            /* border: solid springgreen; */
            background-image: url(images/peach.png);
            /* background-repeat: repeat-x; */
            /* margin: 30px; */
            margin-left: 5px;
            margin-top: 40px;
            float: left;
        }
    </style>

</head>

<body>

    <!-- <img src="images/peach.png">  -->
    <div></div>
    <span></span>
</body>

</html>

说明：上面的两种方法，都是使用了两个块，做成两个背景，使用float属性进行漂浮

补充：

在这里插入图片描述
在这里插入图片描述

多层背景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多层背景</title>

        <style>

            *{
                margin: 0;
                padding: 0;
            }

            div{
                width: 1220px;
                height: 1205px;
                border: 5px dotted pink;
                background-repeat: no-repeat;
                display: inline-block;
            }

            .bg{
                background-image: url(images/dabai.jpg) , url(images/dilireba.jpg);
            }
            .bg2{
                background-image: url(images/dilireba.jpg) , url(images/dabai.jpg);
            }

        </style>

</head>
<body>
        <p>两张背景图，第一张透明，第二张不透明</p>
        <img src="images/dabai.jpg" alt="大白">
        <img src="images/dilireba.jpg" alt="迪丽热巴">
        <div class="bg"></div>
        <div class="bg2"></div>
</body>
</html>
爱睡觉的小馨
关注
  • 9
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML如何设置背景图片？有几种设置背景图片的办法？
爱编程的鱼的博客
01-14 2万+
我们在编辑网页时，如果觉得网页过于单调，这时便可以加上一张自己喜欢的背景图。这篇文章中，W3Cschool 小编给大家介绍下 HTML 中如何设置背景图片，分别有哪几种设置背景图片的方法。
HTML如何设置图片为背景图片
weixin_46958879的博客
07-20 1万+
背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。background-attachment背景图像是否固定或者随着页面的其余部分滚动。默认情况下background-image属性会在页面的水平或者垂直方向平铺。background简写属性，作用是将背景属性设置在一个声明中。background-position设置背景图像的起始位置。background-image属性描述了元素的背景图像.background-image把图像设置为背景。...
HTML设置图片为页面背景
热门推荐
世纪末的架构师的博客
12-06 11万+
HTML设置图片为页面背景： 问题： 在HTML页面中不使用CSS盒模型的前提下如何将一张图片设置为页面背景？ 方法： 在< body >中使用background以及style来设置 例： 在这里我把html格式的文件和jpg格式的图片文件都放到了桌面上 <html> <head> <meta content="text/html" charset="UTF-8"> <title>HTML设置图片为页面背景</
html网页怎么弄背景 图片,在html网页中如何设置背景图片？网页背景怎么设置？...
weixin_42360285的博客
06-15 1万+
不知道大家有没有发现，当我们在浏览部分网页的时候网页的背景都是很漂亮的。那么今天小编来教大家怎么在 html 网页中设置背景图片吧！1.首先还是老样子，我们在开发工具中新建一个 .html 文件，然后再文件中自己定义自己喜欢的内容，代码如下：网页背景设置网页背景怎么设置网页背景怎么设置网页背景怎么设置网页背景怎么设置网页背景怎么设置2.当我们完成第一之后，我们可以在内容中添加一下样式，首先我们在​...
【HTML背景的使用】
zhaochen1127的博客
07-29 595
HTML 的背景使用
html5背景图片自适应特效代码
03-20
使用`使用帮助.txt`和链接（如`谷普下载.url`和`说明.url`）可以获取更多关于如何应用这些技巧的信息。 总的来说，HTML5背景图片自适应特效通过CSS3的`background-size`属性和媒体查询实现了在不同设备上展示背景...
HTML5 SVG全屏背景图片切换
06-24
在"HTML5 SVG全屏背景图片切换"这个项目中，开发者使用SVG作为全屏背景的载体，结合TweenMax.js库来实现动态的图片切换效果。TweenMax.js是一个强大的动画库，提供丰富的功能来控制元素的运动，包括平滑的缓动效果，...
笔记本电脑与书籍PPT背景图片.zip
07-16
标题中的“笔记本电脑与书籍PPT背景图片.zip”暗示了这个压缩包内包含的资源是设计用于制作PowerPoint演示文稿的背景图像。这些图像的主题是笔记本电脑与书籍的组合，可能寓意着学习、工作或者知识与技术的结合。...
HTML5跟CSS3图片背景滑块特效代码
03-20
2. 设置CSS样式：设定滑块的宽高、背景图、初始位置等，使用绝对定位将图片置于背景上。 3. 应用CSS3动画：通过`@keyframes`定义滑动动画，包括开始、结束状态和中间过程的变换。 4. 控制动画：利用JavaScript或...
html5 waterpipe.js烟雾背景图片生成器下载
11-24
总结来说，HTML5 waterpipe.js烟雾背景图片生成器是一个创新的Web开发工具，它利用HTML5的Canvas技术和JavaScript编程，创造出逼真的烟雾动画效果。开发者可以通过调整各种参数来定制烟雾效果，为网页添加独特的视觉...
利用html5本地数据库，实现自定义背景图片。
01-09
纯属自娱自乐，利用html5本地sqllite数据库，实现自定义背景图片。
在html登陆页面代码中添加背景图片，为什么找不到图片放置的位置
qq_17460713的博客
08-21 1万+
我们在给一个登陆页面添加一个背景图的时候，为什么我们明明添加了。 可是相对路径写不正确，就会发现老是加载不上。如下图 代码如下 这种情况，建议各位程序员，将本html和图片放在一个文件夹下面 这样就不会造成加载不上的情况。 希望对大家有帮助！！...
css控制背景图片方法
iteye_16577的博客
11-25 1850
CSS中背景图片的定位，困扰我很久了。今天总算搞懂了，一定要记下来。 在CSS中，背景图片的定位方法有3种： 　　1）关键字：background-position: top left; 　　2）像素：background-position: 0px 0px; 　　3）百分比：background-position: 0% 0%; 上面这三句语句，都将...
如何在HTML添加背景图片么,如何在HTML中添加背景图片
weixin_39541750的博客
07-15 1万+
如何在HTML中添加背景图片在HTML中，我们可以使用以下两种不同的方法轻松地将背景图像添加到要显示在网页上的HTML文档中：使用背景属性(HTML标记)使用内部样式表使用背景属性注意：HTML 5不支持的background属性标签，因此我们必须使用内部CSS选项在Html文档中添加背景。如果要使用Background属性在Html文档中添加背景图像，则必须遵循以下步骤。使用这些步骤，我们可以轻...
CSS背景图片和HTML中的img标签
Night_Emperor的博客
04-15 1万+
背景图片：该图片是218*170css内容：div{ width: 100px; height: 100px; background: url(img/1.jpg); border: 2px solid red; }div{ width: 500px; height: 500px; background: url(img/1.jpg); border: 2px solid red;...
HTML直接插入图片和css使用背景图片区别
Darkness的博客
10-28 1万+
本文转载自：http://www.bangju.com/design_50.html 感谢分享 刚刚接触前端重构的小伙伴或许会遇到一个问题，网页中的图片是做背景（写在CSS中）好呢，还是写在HTML标签中好呢？其实呢不同的场景、不同的项目需求下，选择都会不一样。我们先来分析一下网友的一些结论，并适当吐槽下。 1.使用&lt;/&gt; 有一个好处是，用户可以很方便的右键保存或者复制图片的链接。 2...
HTML5中背景图片如何设置
qq_41886231的博客
08-15 2万+
自己试验了很多种方式，最终发现有一种方式最得朕心～～哈哈哈哈哈 先看一下效果图吧： 只截取了一部分，图片的人物不会因为页面大小而变得扭曲（这一点非常重要），我已经很满足啦～～～～～ 下面看一下代码吧,其实也很简单。 body { /*background: rgb(185, 246, 246);*//*设置颜色背景*/ ...
关于在HTML表格中插入背景图片图片重复显示的问题
YuShanglin's Homework Box
05-13 4万+
先来一段有问题的代码（其实也不能说是有问题，毕竟语法上是没问题的，只是出来的效果不是我们想要的——我们假设预期的效果是背景图片只填充一次而不是多次。） 设定表格的背景图像 姓名 张三 性别 男
CSS+HTML 利用背景background添加图片
qq_39833794的博客
02-25 1万+
可以用CSS+html实现图片的添加与切换，不需要总是加img，可以换方向考虑，加入背景图片，用padding撑开盒子，添加background，去重复就可以，代码如下&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &l
互联网软件应用复习题一.docx
最新发布
11-30
互联网软件应用复习题一.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱睡觉的小馨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值