我的页面文本以不透明图像为中心。在悬停时,文本和不透明度消失,显示清晰的图像。在Chrome和Firefox中,文本以图像为中心,但在Safari中它会偏移。
铬/火狐:
Safari中:
html:
<html>
<head>
<title>Navabar Test</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="texthover_test.css">
</head>
<body>
<!--Toolbar-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--Collapse Button-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Tabs-->
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav">
<li>
<a href="1" style="text-decoration: none">
<button type="button" class="btn btn-default">
Home
</button>
</a>
</li>
<li>
<a href="1" style="text-decoration: none">
<button type="button" class="btn btn-default">
Condominii
</button>
</a>
</li>
<li>
<a href="1" style="text-decoration: none">
<button type="button" class="btn btn-default">
Fornitori
</button>
</a>
</li>
<li>
<a href="1" style="text-decoration: none">
<button type="button" class="btn btn-default">
Chi Siamo
</button>
</a>
</li>
<li>
<a href="1" style="text-decoration: none">
<button type="button" class="btn btn-default">
Dove Siamo
</button>
</a>
</li>
<li>
<a href="1" style="text-decoration: none">
<button type="button" class="btn btn-default">
Contatti
</button>
</a>
</li>
</ul>
</div><!--collapse-->
</div><!--container-->
</div><!--navbar-->
<!--Foto Condominii-->
<div class="content">
<div class="container">
<!--Row 1-->
<div class="row">
<div class="pic col-md-4">
<img src="http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png" width="360" height="240"/>
<span class="address">Via Bassini 27</span>
</div>
<div class="pic col-md-4">
<img src="http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png" width="360" height="240"/>
<span class="address">Via Bassini 35</span>
</div>
<div class="pic col-md-4">
<img src="http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png" width="360" height="240"/>
<span class="address">Via Beruto 7</span>
</div>
</div>
</div><!--container-->
</div><!--content-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
的CSS:
body {
background-color: #f7f7f7;
font-family: 'Raleway', sans-serif;
}
.navbar{
text-align: center;
background: #FFFFFF
}
.nav .btn{
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 14px;
text-transform: uppercase;
}
.btn{
letter-spacing: 1px;
}
.btn-default {
border: none;
padding: 10px 15px
}
.btn-default:hover,{
background: #C4C4C4;
color: #737373;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.content{
margin-top: 80px;
}
/*Address 1*/
.pic{
display: inline-block;
margin-bottom: 20px;
position:relative;
}
.pic img{
display: block;
min-width: 100%;
max-width: 100%;
opacity: 0.2;
transition: opacity 0.5s ease;
}
.address{
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 40px;
color: #626262;
font-weight: 100;
opacity: 1;
position:absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
transition: opacity 0.5s ease;
}
.pic:hover img {
opacity: 1;
}
.pic:hover .address{
opacity: 0;
}
答案 0 :(得分:3)
您缺少CSS3属性transform
的供应商前缀。在这种情况下,-webkit-transform
缺失。
将您的.address
定义更改为:
.address {
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 40px;
color: #626262;
font-weight: 100;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}