htmlcss 网页背景图片，如何自适应宽度，长度不压缩？ div如何半透明？详解_随笔

<!--

body {

background-repeat: repeat-x

}

#div1 { margin:0px autowidth:500pxheight:370px text-align:centerbackground:url(/jscss/demoimg/wall3.jpg)}

#div2 { height:330pxfilter:alpha(Opacity=80)-moz-opacity:0.5opacity: 0.5z-index:100background-color:#ffffff }

-->

</style>

横向平铺背景。

div 透明度，继续参考下面代码

<div style="padding:20px"><div id="div2">这里是透明的DIV</div></div>

</div>

要使图片在html文件中背景图片透明的字不透明，可以使用背景图片的透明类型或者使用<div>标签来实现。

1、使用背景图片透明类型:

首先，在html文件中添加 <style>标签，然后使用CSS的filter属性,让图片的背景变成半透明或完全透明：

<style>

body {

filter: alpha(opacity=50) // 透明度50%

opacity: 0.5 // 设置透明度

}

</style>

2、使用<div>标签来实现:

用<div>标签来将背景图片和文本分开，为<div>设置背景图片，利用CSS的 opacity 属性来控制其透明度：

<p>这里是文本内容</p>

</div>

<style>

.background-image {

opacity: 0.5 // 设置透明度

}

</style>

如何设置div的透明度但是其中的文字不透明:

设置div透明度的时候可能很多朋友会遇到这样一个问题，那就是对象中的文字也被产生了透明现象，也不能说事缺陷，也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果，但是文字不透。代码实例如下:

<!DOCTYPE html>

<html>

<head>

margin:0px

padding:0px

}

.opacity{

width:150px

height:150px

background-color:green

filter:alpha(opacity=50)

-moz-opacity:0.5

opacity:0.5

margin-left:20px

margin-top:20px

}

span{

display:block

width:80px

height:80px

}

</style>

</head>

<body>

</div>

</body>

</html>

上面的代码将第二个div设置为半透明，但是文字也出现了透明现象。那么这里改造一下代码:

<!DOCTYPE html>

<html>

<head>

margin:0px

padding:0px

}

.opacity{

width:150px

height:150px

background-color:green

filter:alpha(opacity=50)

-moz-opacity:0.5

opacity:0.5

margin-left:20px

margin-top:20px

}

span{

display:block

width:80px

height:80px

position:absolute

top:20px

left:20px

}

</style>

</head>

<body>

</body>

</html>

以上代码实现了需要的效果。方法就是讲span元素从div取出来，使用绝对定位的方式，再将span元素定位到原来在div元素的位置。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7079227.html

htmlcss 网页背景图片，如何自适应宽度，长度不压缩？ div如何半透明？详解

发表评论

评论列表（0条）