gpt4 book ai didi

html - Css 模板在所有浏览器中都不相同(覆盖 div)

转载 作者:行者123 更新时间:2023-11-28 05:18:50 26 4
gpt4 key购买 nike

基本上我有 2 列,左侧有一个叠加的灰色图像以创建一种模糊效果。当您将鼠标悬停在它上面时,它会变成透明的。它在 Chrome/Safari 中运行良好,但在 Firefox 中运行良好,我真的不明白为什么。

我上传了一个链接到我的网站以表明我的意思:

http://generowicz.nl/showing_template.html

在 Firefox 中查看时,覆盖图像不适合并覆盖整个左侧。

html, body {
height: 100%;
margin: 0;
font-size: 15px;
font-family: Helvetica;
font-weight: lighter;
}
#left{
text-indent:1cm;
width: 20%;
height: 100%;
position: fixed;
background: rgba(51,51,51,1);
}

#right {
padding-top:2cm;
width: 80%;
height: auto;
position: absolute;
right: 0;
background: white;
}

#img {
position: absolute;
opacity: 0.4;
width:100%;
height:100%;
pointer-events:none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color:#000;
}

#left:hover>#img {
opacity: 0;
}

h1{
font-size: 80px;
color:#CCC;
}

h2 {
font-size: 15px;
color: #CCC;
font-weight: lighter;
}

h3 {
font-size: 15px;
color:#CCC;
}

/* These are for main body */
h4 {
font-size: 15px;
color:#000;
}

h5 {
font-size: 15px;
color:#000;
font-weight: lighter;
}



a.one:link {
text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}

a.one:link:hover {
text-decoration: none;
color: #09F;
}

a.one:visited {
text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}

a.one:visited:hover {
text-decoration: none;
color: #09F;
}
a.one:active { text-decoration: none;
color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}
<body>
<div id="left"><img src="images/graysmall.png" name="img" width="93" height="55" id="img" />
<h1> B </h1>
<h2><a class="one" href="../index.html">Home</a></h2>
<h2><a class="one" href="../about.html">About Me</a></h2>
<h2><a class="one" href="../contact.html">Contact</a></h2>
</div>

<div id="right">


<table width="100%" border="0" align="left">
<tr>
<td width="5%">&nbsp;</td>
<td width="95%" align="left" valign="top">
<!-- TemplateBeginEditable name="Content" -->


<!-- TemplateEndEditable -->
</td>
</tr>
</table>
</div>

</body>

最佳答案

在您的 #img 类中添加 left:0 将提供您需要的结果。请参阅下面更新的类(class),

#img {
position: absolute;
opacity: 0.4;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}

关于html - Css 模板在所有浏览器中都不相同(覆盖 div),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39167287/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com