html – 如何让我的网站的背景透明,而不使内容(图像和文字)也是透明的?

html – 如何让我的网站的背景透明,而不使内容(图像和文字)也是透明的?,第1张

概述我正在做一个学校项目的网站,我目前有一个小问题,我不能使身体的背景透明,也不影响其内容. 这是我的HTML代码: <html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content= 我正在做一个学校项目的网站,我目前有一个小问题,我不能使身体的背景透明,也不影响其内容.

这是我的HTML代码:

<HTML><head>    <Meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />    <Meta http-equiv="Content-Style-Type" content="text/CSS" />    <Title>text</Title>    <link href="style.CSS" rel="stylesheet" type="text/CSS" /></head><body><div ></div><div ID="wrapper">    <ul ID="nav">        <li><a href="index.htm">Inicio</a></li>        <li><a href="sobre.htm">Sobre a banda</a></li>        <li><a href="membros.htm">Membros</a></li>        <li><a href="bilhetes.htm">Bilhetes</a></li>        <li><a href="galeria.htm">galeria</a></li>        <li><a href="areapessoal.PHP">Área Pessoal</a></li>    </ul>    <h1><a href="index.htm"><img src="images/a7x-avenged-sevenfold-7050435-1024-831.jpg" wIDth="130" height="25" alt="Rock Band" /></a></h1>    <div ID="body">        <div ID="bodyi">            <div ID="bodyj">                <div ID="sIDebar">                    <div >                        <h2>galeria de imagens</h2>                        <p>Aqui poderá encontrar uma galeria de imagens da banda,com fotos de concertos,<img src="images/denmark.jpg" wIDth="91" height="72" alt="" />                        entre outras imagens.</p>                        <p ><a href="galeria.htm">Ver</a></p>                    </div>                    <div >                        <h2>Noticias</h2>                        <h3>18 de Abril,2011</h3>                        <h4>"So Far Away" vai ter vIDeoclip</h4>                        <p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold,"So Far Away",ia ter direito a um vIDeoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter vIDeoclip.                        <img src="images/63781127.jpg" wIDth="95" height="73" alt="pic 3" />                        Já foram divulgadas algumas fotos do set de filmagens.</p>                        <h3>10 de Março,2011</h3>                        <h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>                        <p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias.                        As categorias onde os A7X estão a participar são as seguintes:<p>                        - Best International Band (Melhor Banda Internacional)<p>                        - Best shredder (com o Synyster Gates) (Melhor shredder)</p>                    </div>                </div>                <div ID="content">                    <center><img src="images/avengeds.jpg" wIDth="346" height="234" alt="four men walking" /></center>                    <div >                        <h2>O album mais recente</h2>                        <img src="images/nightmare.jpg" wIDth="82" height="80" alt="Unwired album cover"  />                        <p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra,vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-Metal com mais fãs no mundo inteiro.                         Fundados em 1999 por M. Shadows,Synyster Gates,Zacky Vengeance,Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituIDo neste disco por Mike Portnoy,dos Dream Theater - os Avenged Sevenfold já contam com cinco discos de originais na sua carreira.</p>                        <div ></div>                        <h2>Musicas com maior sucesso</h2>                        <table summary="track downloads" border="0" cellspacing="0">                        <tr>                            <th wIDth="55%">Faixa</th>                            <th>Album</th>                            <th >Dowload links</th>                        </tr>                        <tr>                            <td>Bat Country</td>                            <td>City of Evil</td>                            <td ><a href="http://www.youtube.com/watch?v=IHS3qJdxefY">Ouvir</a></td>                        </tr>                        <tr>                            <td>Beast and the Harlot</td>                            <td>City of Evil</td>                            <td ><a href="http://www.youtube.com/watch?v=7bDg7n-chhU">Ouvir</a></td>                        </tr>                        <tr>                            <td>Seize the Day</td>                            <td>City of Evil</td>                            <td ><a href="http://www.youtube.com/watch?v=jUkol9RE72o">Ouvir</a></td>                        </tr>                        <tr>                            <td>Almost Easy</td>                            <td>Avenged Sevenfold</td>                            <td ><a href="http://www.youtube.com/watch?v=Fi_GN1pHCVc">Ouvir</a></td>                        </tr>                        <tr>                            <td>Afterlife</td>                            <td>Avenged Sevenfold</td>                            <td ><a href="http://www.youtube.com/watch?v=HIRNdveLnJI">Ouvir</a></td>                        </tr>                        <tr>                            <td>Nightmare</td>                            <td>Nightmare</td>                            <td ><a href="http://www.youtube.com/watch?v=94bGzWyHbu0">Ouvir</a></td>                        </tr>                        <tr>                            <td>Welcome to the Family</td>                            <td>Nightmare</td>                            <td ><a href="http://www.youtube.com/watch?v=1OZs7IoWTvc">Ouvir</a></td>                        </tr>                        </table>                    </div>                </div>                <div ></div>            </div>        </div>    </div>    <div align="right">        <Font size="2">text</Font>    </div></div></body></HTML>

这里是CSS代码:

.head{    wIDth: 150px;    height: 160px;}body {    Font-family: tahoma,helvetica,arial,sans-serif;    Font-size: 12px;    text-align: center;    background: #000;    color: #ddd4d4;    padding-top: 12px;    line-height: 2;    background-image: url('images/background.jpg');    background-repeat: no-repeat;    background-attachment: fixed;    background-size: 100%;    opacity: 0.8;    filter:Alpha(opacity=80);}td,th {    Font-size: 12px;    text-align: left;    line-height: 2;}#wrapper {    margin: auto;    text-align: left;    wIDth: 832px;    position: relative;    padding-top: 27px;}#body {     background: url(images/body_bg_1.gif) repeat-y;     wIDth: 832px;}#bodyi {     background: url(images/body_top_1.gif) no-repeat;     wIDth: 832px;}#bodyj {     background: url(images/body_bot_1.gif) bottom no-repeat;     padding: 1px 0;     }#body2 {     background: url(images/body_bg_2.gif) repeat-y;     wIDth: 832px;}#bodyi2 {     background: url(images/body_top_2.gif) no-repeat;     wIDth: 832px;}#bodyj2 {     background: url(images/body_bot_2.gif) bottom no-repeat;     padding: 1px 0;}h1,h2,h3,#nav,#nav li {    margin: 0; padding: 0;}#nav {    Font-size: 10px;    position: absolute;    right: 0;    top: 12px;    line-height: 1.2;    padding-left: 120px;}#nav li {    float: left;    wIDth: 108px;    List-style: none;    margin-left: 2px;    border-bottom: 1px solID black;}#nav a {    background: #738d09;    color: #2e3901;    Font-weight: bold;    text-decoration: none;    display: block;    text-align: center;    padding: 1px 0;}#sIDebar {    float: left;    wIDth: 250px;    padding-left: 4px;}#sIDebar .content {    padding-left: 24px;}#sIDebar .content img {    float: left;    clear: left;    margin: 5px 5px 5px 0;}#sIDebar .divIDer {    background: url(images/left_splitter.gif) center no-repeat;    height: 5px;    wIDth: 169px;}#content {    float: right;    wIDth: 462px;}#content1 {    float: left;    wIDth: 800px;}#content1 .content {    margin: 7px 35px 7px 20px;    padding-left: 20px;}#content .content {    margin: 7px 55px 7px 17px;}#content .content table {    wIDth: 310px;    margin-right: 0px;}#content .content table td,#content .content table th {    padding-right: 10px;}#content .content table td.download {    text-align: right;    padding-right: 0px;}#content .divIDer {    background: url(images/right_splitter.gif) repeat-x;    height: 5px;}h1 {    position: absolute;    left: 0;    top: 0;}h2 {    Font-size: 10px;    color: #cf9118;    margin: 1em 0;}h3 {    Font-size: 10px;    margin: 1em 0;}h5 {    Font-size: 20px;    color: #cf9118;    margin: 1em 0;    text-align: center;}h6 {    Font-size: 18px;    margin: 1em 0;}p {    margin: 1em 0;}img {    border: 0;}img.left  { float: left; margin-right: 14px; }img.right { float: right; margin-left: 14px; }.readmore {    text-align: right;}.hIDden {    visibility: hIDden;}.clear {    clear: both;}a {    color: #f0b33c;    Font-weight: bold;    text-decoration: none;}a:visited {    color: #cf9118;}a:hover {    text-decoration: underline;}table a {    text-decoration: underline;    Font-weight: normal;    color: #7f7c79;}#power {color:#fff;text-align:center;}#power a {color:#fff;}

任何帮助的赞赏…提前感谢.

解决方法 我认为最简单的解决方案,而不是使身体元素部分透明,将是添加一个额外的div来保持背景,并改变不透明度,而不是.

所以你可以添加一个div:

<div ID="background"></div>

并将身体元素的背景CSS移动到它,以及一些额外的定位属性,如下所示:

#background {    position: fixed;    top: 0;    left: 0;    wIDth: 100%;    height: 100%;    background-image: url('images/background.jpg');    background-repeat: no-repeat;    background-attachment: fixed;    background-size: 100%;    opacity: 0.8;    filter:Alpha(opacity=80);}

这里有一个例子:http://jsfiddle.net/nbVg4/4/

总结

以上是内存溢出为你收集整理的html – 如何让我的网站的背景透明,而不使内容(图像文字)也是透明的?全部内容,希望文章能够帮你解决html – 如何让我的网站的背景透明,而不使内容(图像和文字)也是透明的?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1099610.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存