好程序员分享该如何选择background-image和img标签

最新推荐文章于 2022-03-05 13:41:47 发布
最新推荐文章于 2022-03-05 13:41:47 发布
阅读量121 收藏
点赞数
原文链接：https://my.oschina.net/530504/blog/3041931
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

好程序员分享该如何选择background-image和img标签，用img标签

　　如果你希望别人打印页面时候包含这张图片请使用img标签

　　当这张图片有非常有意义的语义，比如警告图标，请使用img标签及它的alt属性。这样意味着你可以向所有的用户终端现实他的意义。

 

IE6下背景图片不能益出父级元素要使用

imgmultipleoverlayimagesinIE6.

 

　　如果你使用动画img动画要比background-image表现更好

improveperformanceofanimationsoverabackground

 

　　什么时候用CSSbackground-image

 

　　如果图片不是内容的一部分使用background-image

 

　　如果使用图片替换文字请使用background-image

 

　　如果你不希望别人打印页面时候包含这张图片请使用background-image

 

　　如果你想改善加载时间使用CSSsprites

 

　　如果你只想用一张图片的一部分请使用CSSsprites

 

　　用background-image以及background-size:cover拉伸填充整个窗口

转载于:https://my.oschina.net/530504/blog/3041931

weixin_33885253
关注
黑马程序员-------HTML基础知识
guoguo_19900310的专栏
01-10 628
---------------------- http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发、 http://edu.csdn.net"target="blank">.Net培训、期待与您交流！ ---------------------- 一、HTML简介 （1）HTML是什么？ HTML（Hyper Text Marku
css选择器-行高-背景属性-列表属性-内容溢出-css样式分类-样式的继承和覆盖(重点)-样式的优先级-标签的显示模式(重点)
qq_52711676的博客
06-01 333
语法： 将页面中所有标签都选中使用场景：通常设置 元素：link 正常链接状态 元素：visited 点击以后的状态 元素: hover 当鼠标移动上去的状态-------重点、常用 元素: active 当鼠标按下去时候的状态总结： 1.伪类是选择器，不是css的属性，不能写在{}中 2.visited和link不能适用于普通标签，只有a标签才有（LV） 3.hover和active
怎么得到一个页面的a标签，怎么在页面里放置一个很简单的图标，
melody_day的博客
12-11 2500
就说了getElementByTagName和选择器 怎么在页面里放置一个很简单的图标，不能用img和background-img （说了canvas，或者一些库有icon库，data-icon). .正则表达式判断url（只写了判断是否是http或者https开头） 4.怎么去除字符串前后的空格（正则匹配^\s和\s$并且替代，Jquery的$.trim，string.t
background-image样式和img标签如何选择
then啥
11-23 2159
background-image的优势： 节省img标签所占用的空间 便于布局（例如将文字布局在图片上，直接使用padding调整即可，使用margin会导致边距冲突） 什么情况下应该使用img标签： 由于搜索引擎不搜索css，所以当图片可以帮助网页获取流量时，应该使用img标签，且同时设置alt属性对图像进行说明 ...
img 和 background-image 优劣比较
Youth means limitless possibilities.
12-13 2989
一. 简单来说，img是内容部分的东西，css的background-image是修饰性的东西。 img——从页面元素来说，如果是页面中的图片是作为内容出现的，比如广告图片，比如产品图片，那么这个必然是用img了，因为这个是页面元素内容。页面元素内容最关键的一点就是，当页面没有样式的时候，还是能一眼看过去就知道什么是什么…… background-image—背景图片，修饰性的内容，在页面中可有可...
工作中用Img标签和用background-image的区别？以及什么时候建议用Img标签？什么时候用背景图
sally18的博客
07-19 1791
如下场景使用img标签比较合适： 如果图像是等内容的一部分或图表或人，使用Img标签加上alt属性。 如果需要打印页面并且默认情况下打印图片则使用IMG。 使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。 如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。 如果配合 z - ind...
CSS盒子模型
m0_62786471的博客
10-24 550
目录 一、盒子模型概述 二、 盒子模型相关属性 1.边框样式 2.边框宽度 3.边框颜色 4.综合设置边框 5.圆角边框 6.图片边框 二、边距属性: 1.内边距 2.外边距 三、box-shadow属性 三、box-sizing属性 一、盒子模型概述 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob...
黑马程序员-HTML和CSS
yaofch的专栏
01-19 971
---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ---------------------- 1.    静态页面和动态页面 静态页面：有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器 动态页面：服务器上面没有浏览器要看到的页面，而是服务器动态生成的HTML页面
web_学习笔记
weixin_43386350的博客
03-05 308
nester_liz笔记
div+background-image和img标签的选择
若即的专栏
10-17 7086
标签和div+background-image的选择前言  一般情况下，标签和div+background-image都能在块级元素中显示图片，之前就在想，这两种方式有什么区别。通过这两天的实践，逐渐摸清了他们之间的区别以及适用情况，在这篇文章中总结他们的使用要点。区别浏览器上下文的区别  使用div+background-image实现图片显示的时候，该块级元素的上下文为普通的块级上下文而使用im
【前端】div+background-image和img标签的选择（转）
diyinqian的博客
08-03 6254
前言 一般情况下，标签和div+background-image都能在块级元素中显示图片，之前就在想，这两种方式有什么区别。通过这两天的实践，逐渐摸清了他们之间的区别以及适用情况，在这篇文章中总结他们的使用要点。 区别 浏览器上下文的区别 div上下文 使用div+background-image实现图片显示的时候，该块级元素的上下文为普通的块级上下文 img上下文 而使用...
【css】4.background-image背景图片设置
jieweiwujie的博客
11-06 5288
background-image背景图片设置
CSS背景属性Background详解
longxzq的专栏
03-14 5884
本文详解了CSS的背景属性Background，包括CSS3中新增的背景属性。如果你是个CSS初学者，还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。 css2 中的背景(background) CSS2 中有5个主要的背景(background)属性，它们是： background-color: 指定填充背景的颜色。background-image: 引用图片作为背景。back...
img标签与background的区别
Alisane的博客
12-09 822
问题描述：在实际开发中，会遇到大图作为背景图片的场景，这时图片的展示方式有两种。 第一种是使用<img>标签去显示，第二种是以背景图片显示。 img:html中的标签img是网页结构的一部分，会在构建dom结构的时候就去加载图片。 background:以css背景图存在的图片会等dom结构加载完成，才开始加载。 当使用backgruong设置背景图片的时候 会出现背景图片...
img和background-img区别
weixin_48860383的博客
10-27 1440
img和background-img区别 1、 是否占位 background-image是背景图片，是css的一个样式，不占位 img 是一个块状元素，它是一个图片，是html的一个标签，占位 2、否可操作 background-image是只能看的，只能设置background-position, background-attachment, background-repeat img是一个document对象，它是可以操作的。比如更换img src的路径可以达到更换图片的目的，也可以移动它的位置，从
html中img标签显示图片属性写法与background差异
yyyypooi的专栏
12-08 3406
.liuxijun{ border: none; width: 150px; height: 150px; background: url(../images/1.jpg) no-repeat 0 0; background-size: cover; } img都会有一个默认1px边框。 img标签属性写法：在标签中书写width\height\src，不留有1px边框
Img标签与background
weixin_44573938的博客
01-19 2217
Img标签与background 开发工具与关键技术：DW 作者：汪秋霞 撰写时间：2019/1/17 Img标签与background Img标签和background都可以在文档中加入图像。下面我们对两者进行一些比较。 Img标签在没有设置height 和 width 属性的情况下，图像依然可以在浏览器中被加载显示。而在设置b...
程序员记事本表白代码
最新发布
10-20
background: #000; } canvas { position: absolute; width: 100%; height: 100%; } .aa { position: fixed; left: 50%; bottom: 10px; color: #ccc; } <canvas id="pinkboard"></canvas> /* ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值