如何在div中设置背景图片并且自适应div大小

已于 2023-01-07 11:46:49 修改
阅读量4.2w 收藏 70
点赞数 19
分类专栏： web 文章标签： css 定位
于 2020-11-16 17:50:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43387852/article/details/109726140
版权

参考如下代码，设置背景图片的大小为100% 100%并且设置no-repeat
这样图片就能在div改变的情况下，仍然显示完全

<!DOCTYPE html>
<html>

<head>
    <style>
        #a {
            background-color: rgb(255, 208, 0);
            background-image: url("1.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: absolute;
            padding: 0px;
            width: 100%;
            height: 15%;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <!--
        height和width只是设置标签的大小，标签的距离通过top和left属性设置
        absolute相对于已经定位包含关系最近的祖先元素(body相对于网页)
        relative则是相对于元素自身正常的初始位置而言，也就是理论上正常的位置而言
    -->
    <div id="a">
    </div>
</body>

</html>

这是div高度为15%的时候
在这里插入图片描述
div高度为10%的时候在这里插入图片描述

归来空空
关注
  • 19
    点赞
  • 踩
  • 70
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
css background的“图片自适应div”和“图片自适应div并完全填充”
PrimaryColor
12-30 1582
效果图： 代码： <!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> body
div或img图片高度随宽度自适应的方法
12-28
该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。 利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片上方垂直居中展示文字的，如果不需要可以选择最下方更简洁的代码） 行内元素垂直居中
div中加背景图片方法笔记
ecH0o0的博客
05-16 1万+
在div中加背景图片，例如选项卡的左下角加对钩图片。 在div中应用background-image等属性，直接贴代码 background-image: url("img.jpg"); /*图片从左往右移动的百分比大小，从上往下百分比大小，重复方式 换成数值同样如此，在这里没有调整大小的方法*!*/ background-position: 10% 40%; /*从左到右，从上到下的缩放比例，单位px则为px缩放*/ background-size: 40% 60%; /*填充不完则不进行重复渲染图片*
div背景图片完整填充样式设置---background、background-size、background-attachment
wangchaohpu的博客
03-09 9580
<div>图片</div> <style> div{ background: url(images/images/bg.jpg) no-repeat; background-size: cover; background-attachment: fixed; } </style> 说明： 1、backgro...
一个div设置多张背景图片
zeroyulong的博客
04-03 2366
一个div设置多张背景图片，效果如下图代码如下&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;一个div设置多张背景图&lt;/title&gt; &lt;/head&gt; &lt;style type="text
给div添加背景图片时查看图片样式-设置background-size属性
最新发布
LzzMandy的博客
07-15 925
【代码】给div添加背景图片时查看图片样式-设置background-size属性。
CSS3——给div设置背景图片
热门推荐
abraham的博客
11-19 2万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } div{ width: 200px; height: 2
html div background-image,css3背景background-image
weixin_34145350的博客
06-30 709
css3背景background-imageCSS3中包含几个新的背景属性，提供更大背景元素控制。在本章您将了解以下背景属性： background-sizebackground-origin您还将学习如何使用多重背景图像。浏览器支持 属性 浏览器支持background-sizebackground-originInternet Explorer 9+, Firefox, Chrome, ...
css的background-image属性&html的img标签
danni_he的博客
09-17 3069
background-image属性值 url()中可以写绝对路径，也可以写相对路径，甚至也可以写其他域名下的图片资源。url()中的路径加不加引号都可以。 绝对路径写法： background-image:url("/imgs/1.jpg"); //或 background-image:url(/imgs/1.jpg); 相对路径写法： background-image:ur...
css3实现一个div设置多张背景图片及background-image属性
Preserve
03-26 3310
以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。 题外话 关于css3的background，功能很强大，有很多属性，像
HTML中使背景图片自适应浏览器大小实例详解
08-30
在HTML中，要实现背景图片自适应浏览器大小，通常需要借助CSS来完成。这是因为HTML本身并不直接支持背景图片自适应的特性，而CSS提供了多种方式来控制元素的背景图像显示。下面将详细介绍一种常见的实现方法及其原理...
纯js实现div内图片自适应大小(已测试，兼容火狐)
10-25
在网页设计中，图片自适应大小是一个常见的需求，特别是在响应式布局中，为了确保不同设备和屏幕尺寸下的视觉效果，我们需要让图片能够根据其容器（如div）的大小自动调整。本文将详细介绍如何使用纯JavaScript实现...
利用onresize使得div可以随着屏幕大小而自适应的代码
12-09
在网页设计中，让元素随屏幕大小自适应是创建响应式布局的关键。标题提到的"利用onresize使得div可以随着屏幕大小而自适应的代码"是解决了一个特定问题：如何在浏览器窗口尺寸调整时，保持div元素的相对定位正确显示...
JQuery加载图片自适应固定大小的DIV
01-21
如何在固定大小的div中放置一个图片，当图片较小时显示实际大小，当图片超过div 大小时图片 自动适应div 的大小 jquery图片自适应大小实现过程的主要代码： 代码如下: 代码如下: .divImg{ max-height:200px;...
div中插入图片_Web前端开发基础知识，设置网页背景图，如何在网页中插入图片...
weixin_39622399的博客
11-29 3566
图片一、图片的表现形式当我们在制作页面的时候，通常会遇到图片的三种表现形式，如下：1、内容图片内容图片是页面中真正的内容，没有内容图片，就无法完整的理解页面内容。如淘宝网上的商品展示图片，这些图片是网页的一部分，它们能帮助你决定这个页面的内容是否是你需要的。内容图片2、布局图片布局图片出现在页面背景中，要想理解页面的内容，它们不是必须的。如苹果官网的这个图片，没有这个图片也能理解页面上文字描述的内...
html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
weixin_42701915的博客
05-31 1857
标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是< img>标签一样通过src引入，而是通过css的background-image: url('路径')实现。实现背景图片固定宽高比缩放我们采用padding-top:(percentage)来实现，padding-top取值百分比是相对于包含块的宽度而定。因为图...
html div background-image,html - DIV background-image overflow - Stack Overflow
weixin_28844359的博客
06-30 122
It is very possible with CSS3. I stumbled on this post while attempting this myself and discovered I could do it.Here's the code I used:#page{width:1024px;height:662px;padding:0 58px 105px 58px;backgr...
html网页怎样在背景图片里添加div,如何为一个div添加多个背景图片
weixin_31092081的博客
06-04 5170
大家在制作页面的时候，一个div只能有一个背景图片。如果需要多个，就要新建元素，下面是学习啦小编给大家整理的一些有关为一个div添加多个背景图片的方法，希望对大家有帮助!为一个div添加多个背景图片的方法首先，我们新建一个HML页面，并准备好两张不同的背景图片。然后，我们在htl中随便新建一个块级元素，为他设置宽高，可以写点文字。浏览器中的效果是下图这样的。然后，我们开始为元素添加背景图片，我是将...
div图片自适应div大小
05-24
要让图片自适应div的大小，可以使用CSS的`background-image`属性，将图片作为div的背景图像，并将`background-size`属性设置为`cover`或`contain`。 例如，如果你有一个div元素，你可以将其CSS代码设置为： ```css div { background-image: url('path/to/image.jpg'); background-size: cover; background-position: center center; } ``` 这将使图片充满整个div，同时保持其纵横比例不变。如果你想要图片适应div的大小，可以将`background-size`属性设置为`contain`，这将使图片尽可能大地适应div，同时保持其纵横比例不变。 ```css div { background-image: url('path/to/image.jpg'); background-size: contain; background-position: center center; } ``` 这些CSS代码将使图片自适应div的大小，并且可以在不同大小的屏幕上正确地呈现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值