logo标签列表

CSS半透明背景

htmlcssbackground
3
我已经到处寻找答案，我正在尝试使用div和css编码设计。图像的顶部有一个渐变，从左到右是不同的颜色。我发现的问题是我只能做到一半，最后我终于让图像居中了，但其中一部分被隐藏在背景下面。
(http://pretty-senshi.com/final-final.html) <-- 目前为止设计的样本 http://pretty-senshi.com/original.png <-- 原始设计 http://pretty-senshi.com/gradient.png <-- 需要在X轴上重复的背景渐变。
<html> <LINK href="style.css" type=text/css rel=stylesheet> </head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container"><div id="rightHalf">

    </div><center><img src="images/Final-Final_02.png" id="picture"></center>
    <div id="header2">

    </div>

    </div>
    </div></div>

这段代码是CSS：

@charset "UTF-8";
/* CSS Document */
body {background: url(images/final-final_01.png);
background-repeat:repeat-x;}
div#container {
width:100%;}
picture {z-index: 999;}

#rightHalf {
background: url(images/final-final_03.png);

background-repeat:repeat-x;
width: 50%;
position: absolute;
right: 0px;
height: 100%;
z-index: 1;
}
4
尝试将 #rightHalf div 的 z-index 值改为 -1，而不是 1。 - Marko Francekovic
我简直不敢相信这是如此容易！太好了！谢谢！现在完全可以正常工作了！ - prettysenshi
2
有一些事情可能不会帮助你解决问题，但仍需要解决：你应该有一个文档类型声明。没有<head>标签，但你还是关闭了它。如果你一开始就使用外部样式表，请不要向body标签添加样式属性。center标签已经过时了，现在可以尝试使用margin: 0 auto;。最后，我建议你正确嵌套和缩进HTML标签，以便更容易阅读。这些做法不仅可以使你的代码在各种浏览器中更好地运行，而且还会让你看起来更专业。希望这能帮到你。 :) - Scotty C.
1个回答
2
我猜使用z-index = -1来处理#rightHalf就可以解决这个问题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接