‘壹’ css何时用img,何时用背景图片
在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然?
如下场景使用img标签比较合适:
1、如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人),使用Img标签加上alt属性。
2、如果你想打印页面并且你想要的图像包括默认情况下使用IMG。
3、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
4、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
5、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
6、使用img代替有背景图像可以显着提高性能的动画背景。
7、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像,加载样式表加载后,延迟加载的网页。
如下场景使用background-image属性比较合适:
1、如果图像不是内容的一部分时使用backgrond-image。
2、当图像代替文本使用时使用backgrond-image。
3、如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。
4、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
5、如果你只需要展示图像的一部分通过CSS sprites,时使用backgrond-image。
6、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。
‘贰’ 网页设计背景和图片背景的关系
呵呵 问题很奇怪啊
你可能不是想做华丽的大网页,只是想把你的图片背景弄成网页的背景,那只要对该图片进行编辑就可以了,用PHOTOSHOP打开图片,将你网页的背景复制进去,将你要修改的图片至于背景之上,然后将图片本身的背景用魔术棒选择进行剪切,之后另存为JPG格式的图片就可以了,剪切的时候需要仔细,再多说就是PHOTOSHOP教程的事了.
也可以直接储存成透明的GIF格式的图片
如果是要做一个华丽的网页,网页开启速度会很慢,如果忽略开启速度的话,你可以用PHOTOSHOP画一个网页,包括你在屏幕上所有能看到的地方都可以画,甚至可以画成一个房间,一个公园等等,然后用PHOTOSHOP带的ImageReady,储存优化结果,输出的就是一个网页,当然,这个网页上边是一个大图片,你把这个图片从网页上去掉,然后把这个图片设置成背景.
如果你用ImageReady很熟练,可以制作切片,将每个部分都切割成小图,选择所有切片,储存优化结果后在将图片都改成背景,这样可以增加传输速度,不过剪切的不要太小,最好是边框剪下来,每个栏目剪切成一个,每个连接剪切一个,反正是剪切的要细致,要认真,切记要放大了剪切,精确到像素.
不用担心图片对不上,网页会跟你画的一模一样,而且改成背景后,还可以再它上边再添加图片,因为每个图片都已经划分好表格了.
以上所做出的效果可能还不如意,主要是切片和网页内容的距离,你可以在表格中再创建表格,至于距离什么的你没问,应该会吧,top left right等.
至于水印,方法非常多,简单点的就是把图片的透明度调成20%左右,也可以通过滤镜,制作出立体感觉,也可以将图片去色,复制到通道,在通道中选择选区,然后用一种喜欢的颜色填充
‘叁’ 设置网页中的背景图片
方法一:在HTML文件中设置
HTML的中有两个关于背景的属性,其中的background用来设置背景图片。示例如下:
如果背景图片小于网页显示窗口,那么这个背景图片会自动重复。
为保证浏览器载入网页的速度,建议尽量不要使用字节过大的图片作为背景图片。
可以参考这个网站的教程和示例:
http://www.blabla.cn/html_tutorials/045_html_bgcolor_background.html
方法二:在CSS文件中设置
CSS的背景图片属性
示例:
可以参考这个网站的教程和示例:
http://www.blabla.cn/css_tutorials/020_css_background.html
参考资料:
http://www.blabla.cn/html_tutorials/index.html
‘肆’ 网页上背景和图片怎么区分
打开你的网页,点击浏览器上面查看菜单,选择查看源文件。
再源文件中查找你所看到的图片名称(图片名称可在网页中点鼠标右键属性看到),如果这个图片名称出现在<img>中,它就是一个普通图片,如果出现在<background>中,它就是背景。
其实背景也是图片不过使用在了专门的位置,比如网页整体背景、表格背景、层背景等。
‘伍’ 网页制作中,使用的背景图片有什么要求
没啥特殊要求,图片够大,你自己喜欢就行,网络图片频道,搜‘桌面’,‘美图’,都有不少选择
‘陆’ WEB标准颜色到底什么时候使用,是上传到网上的图片,还是在写网页时设置背景色之类的时候
用到颜色代码,一般在设置文字的颜色、网页的背景色、鼠标悬停等地方会用到颜色。图片就是图片,不会用到颜色代码。
‘柒’ 网页布局什么时候用图片背景,什么时候用img标签
一般固定图片,那种小图标都是用都是用做背景background,最近background-attachment:fixed;这个属性挺火的,图片固定不动可以有点视觉错觉。活动的图片如案例新闻图片就要用img标签。这样程序要才好套用程序
‘捌’ 网页设计的时候针对图片有什么要求
网页设计与一般的平面设计对图片的要求不同,网页中图片不需要很高的分辨率,因此在制作网页图片时有很大的自由空间。但在网页中使用图片时,上海志勋网络提醒您,有以下几点应该注意。
1、图片文件的大小是我们上海志勋网络网页设计人员必须考虑的问题,因为浏览者在下载较大的图片时往往需要花费大量的时间,这样,网站打开速度也会变慢,太长时间的等待将影响到浏览者的浏览意愿.因此应该对较大的图片文件进行适当的压缩和切割。
2、图片不只是网页设计中装饰性的点缀,它可以帮助志勋网络设计员传达网页要表现的内容,所以在选择图片时,应该挑选与网页主网站主题有关联性的图片。
3、对于网站的标志图片,主体应该清晰可见,图形的含义最好简单明了,图片内所含的文字应该清楚且容易辨认。
4、如果将图片作为网页设计背景,最好选用淡色系列的图片,这样有助于网页的整体和谐.背景图片像素值越小越好,建议使用宽均很小的图片来制作可以拼接的背景图,这样不仅可以大大减少文件尺寸,又可以使页面显得美观.志勋网络提醒您:背景图片只是用来衬托图片主题的,切忌过于花哨。
‘玖’ html网页制作中如何设置背景图片(如何引用)
1、首先打开Atom编辑器导入项目文件夹,先创建一个index.html的文件。定义一下html文件的主信息: