常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下,进行图片编辑处理的。
二、防止图片撑开DIV方法二
如果不处理照片方法适应DIV有限宽度,那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。
三、解决方法三
对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片,不会影响图片画面质量。
比如你的网页DIV宽度为500px,那你上传图片后对img标签设置width等于500以下即可。
即可解决图片过宽导致DIV SPAN撑破,这样好处可以等比例放大缩小图片。
四、CSS解决撑破方法四
这种方法使用CSS直接对div内的img进行宽度设置,这样不好是如果图片过小会影响网页浏览图片时候效果。
由于我发表了80 Large Background Websites
普遍的错误:被裁切的背景(Demo)看一下示例文件,在1280px的分辨率下看起来是好的,但是如果转换到更高的分辨率下,你将看到类似于裁切边缘的效果。
示例#1:单图片(Demo)一种简易的方法修补刚才的问题:让图片边缘的颜色和BODY标签的背景颜色一样。我使用Web Designer Wall的背景作为例子。查看背景图片
,注意图片的边缘是不是固定的同一种颜色?CSS部分CSS代码就很简单。就是定义BODY的背景图片了(position:center,top)。
这是CSS代码:body {padding: 0margin: 0background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top
width: 100%
display: table}
注意有两行额外的代码。那是为了在改变浏览器大小浏览器宽度小于内容大小的时候防止背景移动(firefox中会出现这个bug)。
示例#2:两张图片式(Demo)这是我用在job board板块设计里的
Design Jobs on the Wall
。BODY用一张小的木质纹理图片重复,然后将大图片放在外包div wrapper的top center。body {padding: 0margin: 0background: #d39c5c url(images/cork-bg.png)
color: #333333}#wrapper {background: url(images/corkboard-top-bg.png) no-repeat center top
width: 100%
display: table}#content {width: 916px
margin: 159px auto 0
background: #fff
border: solid 1px #ccc
padding: 20px}h1 {margin: 0padding: 0}
技巧是将大背景图片的颜色设置为何背景小图片的颜色相似。
一、CSS层叠性
说明
层叠性是多种CSS样式的叠加,是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些样式出现的先后顺序来决定,处于最后面的CSS样式将会覆盖前面的CSS样式。
二、CSS继承性
说明
简单的理解为—“子承父业“,是指子标签会继承父标签的==某些==样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
三、CSS优先级
在复杂CSS样式表,往往并不是相同样式不同值的堆叠这么简单,经常出现两个或多个不同样式规则应用在同一元素上,这时到底采用哪个样式呢?这就是典型的CSS优先级问题。
处理优先级问题,就是考虑样式权重的高低。这里先给大家介绍一些特殊的情况:
==继承样式的权重为0。==也就是说,在嵌套结构中,无论父元素样式权重多大,子元素继承时,应用在子元素上的权重都为0,即子元素定义的样式会覆盖所有继承来的样式。
==行内样式优先。==应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。