Html学习笔记---background-image及img导入图片比较

最新推荐文章于 2024-03-21 10:05:05 发布
最新推荐文章于 2024-03-21 10:05:05 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： html学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34964399/article/details/79324475
版权

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>background</h2>
    <ol>
        <p><li>backgound-image:你设置多大的像素，会自动铺满</li></p>
        <div style="background-image:url('image/logo.png');height:120px"></div>  
        <p><li>backgrund-repeat:no-repeat;repeat-y;repeat-x</li></p>
        <div style="background-image:url('image/logo.png');height:120px;background-repeat:repeat-y"></div>
        <p><li>background-position:-x;-y</li></p>
        <div style="background-image:url(image/qqbq.png);background-repeat:no-repeat;height:33px;width:29px;background-position-x:0px ;background-position-y:0px;"></div>
        <p><li style="color:red">简写background:url position-x position-y no-repeat</li></p>
        <div style="background:url(image/qqbq.png) 0px -40px no-repeat;height:33px;width:29px;"></div> <!--里面的0px和40px不是设置图像的大小，是取qqbq.png0，-40px处取 宽度为33px，高度为29px的大小图像-->

    </ol>


</body>
</html>

 

 

通过 img 导入图片比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
    overflow:auto,style样式中的width和height有效，图片有滚动条
    <div style="width:300px;height:100px;overflow:auto">
        <img src="image/3.jpg" />
    </div>
   overflow:hidden，style样式中的width和height有效,图片没有滚动条
   <div style="width:300px;height:100px;overflow:hidden">
        <img src="image/3.jpg" />
    </div>
    没有overflow样式，style样式中的width和height无效，图片变成默认大小,会溢出这个div设定的大小。但是由于你的div高度为100px；所以下面的带有“aaa”的div就接着上面的div开始，而不是溢出的图片末端开始    
    <div style="width:300px;height:100px;">
        <img src="image/3.jpg" />
    </div>
    <div style="height:30px;background-color:red;color:red">
       aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>

</body>
</html>

如果想把原图缩小或放大：直接在img中设定大小 

<img height="100" width="100" src="../static/1.png" />

xiaoa~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
background-image使用
web18224617243的博客
08-01 2538
url("")；
css如何设置背景图片？background属性添加背景图片
热门推荐
lin123_00的博客
05-18 5万+
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山.
background和img插入图片
Akuil的博客
11-23 911
background 打包后图片不显示
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
i_am_a_div的博客
07-21 2万+
uni-app小程序图片使用有image标签和background-image背景图两种方式： 下有获取本地图片的网络地址方式：见第四步 一、方式一：使用image标签引入： 1.官方文档说：src 仅支持相对路径、绝对路径，支持 base64 码；但是我使用了网络地址https也可以显示 目前支持以下四种方式引入： <view>引入image的绝对路径src：</view> <image src="~@/static/iconimg/big.png"
背景图片的位置设置应用【图片和背景图的组合使用】
weixin_43837268的博客
09-26 692
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>背.
css中background属性引入图片url()中地址
weixin_57844432的博客
08-10 6073
css中background属性引入图片url()中地址
html_css学习笔记_第一阶段.rar
02-22
- **属性**：标签可以带有属性，如`<img src="image.jpg" alt="图片描述">`，`src`定义图像源，`alt`提供替代文本。 - **链接**：`<a>`标签用于创建超链接，如`访问示例网站</a>`。 - **列表**：`<ul>`（无序列表...
Web开发基础学习笔记整理（1）
01-08
<img src="image.jpg" alt="描述图片"> 访问示例网站 </html> ``` 在上面的代码中，`<!DOCTYPE html>` 定义了文档类型，`<html>` 是根元素，`<head>` 包含元数据（如页面标题），而 `<body>` 包含实际可见的内容...
HTML学习笔记
11-27
背景图片使用`background-image`属性，如`body { background-image: url('image.jpg'); }`。 十三、HTML头部信息 `<head>`元素包含文档元数据，如`<title>`定义页面标题，`<meta>`元素提供元信息，如字符编码、描述...
html+css+js源码笔记
04-23
2. 属性：元素可以有属性，如`<img src="image.jpg" alt="图片描述">`中的`src`和`alt`属性。 3. 块级元素与内联元素：块级元素如`<div>`独占一行，而内联元素如`<span>`则可与其他元素并列在同一行。 CSS核心技术...
HTML笔记.doc
02-18
- `background`属性：用于设定页面的背景图像，如`background="image.jpg"`。 - `bgcolor`属性：设定页面的背景颜色，如`bgcolor="#FFFFE7"`表示淡黄色。 - `leftmargin`和`topmargin`属性：分别设置页面的左边距和...
前端：background-image引入svg图片背景浅析
Pain4Dawn的博客
12-06 2万+
前端：background-image引入svg图片背景浅析概述掌握的知识background-image相关属性svg相关属性核心 概述 background-image引入图片，之前给笔者印象是利用background-size属性、background-repeat属性可以控制图片的缩放，拉伸从而实现背景图片的自适应。但是当遇到background-image遇到svg时，发现了不一样的结果...
页面导入图片并设置位置---CSS背景及总结
H.千面的博客
12-01 1016
页面中导入图片，并设置位置，不要使用src直接导入，而要使用background-image: url(url);导入，其中，括号内的url是图片的地址。 使用src导入，不好设置位置。 background-image : none | url (url)属性是设置背景图片，小的装饰图片，背景图片都可以使用这个属性。 利用 background-position 属性可以改变图片在背景中的位置。 div { width: 300px; height: 300
css添加背景图片background-image
Caiqiudan的博客
02-02 857
{background-image: url(../base/images/background2.jpeg); background-repeat: repeat-y; /*垂直方向重复图片*/ background-size: 100%; }
关于CSS中background:url()插入背景图片，图片路径的问题
controlmaa的博客
11-19 2万+
写了一个css的练习，需要在一个盒子中插入图片作为背景，css代码如下（插入背景图片的代码在第五行）： .search-btn::before { content: ""; display: block; width: 20px; height: 18px; background: url(image/search-btn.png) no-repeat; } 我的项目结构如下（上文的代码在index.css中，我想要插入的图片是image目录下的search-btn
背景图片的正确导入方式
weixin_30466953的博客
05-27 388
例：将此图片作为背景图片导入。 <ul id="skin"><li id="skin_0" title="蓝色" class="selected">深蓝色</li><li id="skin_1" title="紫色">紫色</li><li id="shin_2" title="红色">红色</li>...
使用background 的url 引入背景图片失效的问题
最新发布
galaxyJING的博客
03-21 438
有人可能会说根目录不行吗，我尝试过是不行的，这还是和css外部样式有关，做一个设想：我们在head里面直接写style可以吗，这样是可行的，但是这样代码的可读性和可维护性不高，所以我还是推荐使用相对路径. ./来引入。就会先转到工程文件目录下，那么就能找到images文件夹，也就能找到我们想要的图片。因为我们一般开发引用的是外部样式表，使用该路径在当前目录下找不到images文件夹，那么也就找不到我们所想要引用的图片。. . /表示的是上一级目录 同理. . /. . /表示的是上上级目录。
html设置li背景图片,使用CSS在列表中将背景图像设置为背景颜色
weixin_35890416的博客
06-04 1586
这是代码BlahBlah Blah Blah基本上,我的列表已经有一些样式,例如,我为它设置了背景颜色.现在在课堂“测试”中,我还设置了背景图像.我的问题是我想让背景图像保持在背景颜色之上,我不知道如何实现这一点.我尝试使用z-index,但我认为它不适用于背景图像.请看一下图片编辑：这是CSS代码例如,这是我的列表的样式#sidebar ul li{background:#ccf;}这是课堂测试...
img与background引入图片的区别
坤音女孩的博客
11-18 2162
1.img占位，一般引入比较重要的图片，能被搜索引擎抓取；background不占位，一般引入装饰性图片，不能被搜索引擎抓取 2. 背景图片：background:url(‘t.png’) no-repeat 0 bottom pink; 第一个值: 图片路径; 第二个值：平铺方式，如果不写，平铺。no-repeat不平铺。 repeat-x水平平铺 repeat-y垂直平铺 第三个值：水平坐...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值