各セルが一意の背景を持つHTMLテーブルがあります。
セル内の単語を暗くせずに、ホバー時に背景画像を暗くしたいと思います。これどうやってするの？
現状の私の現在のコードは次のとおりです。
html{
color: white;
font-size: 200%;
}
th{
width: 500px;
height: 300px;
background-image: url(https://images.pexels.com/photos/1054655/pexels-photo-1054655.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-position: center;
background-size: 100%;
transition: 1s;
}
th:hover{
filter: brightness(50%);
background-size: 125%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table>
<tr>
<th>
<h1>Elephant</h1>
</th>
</tr>
</table>
</body>
</html>「象」という言葉も暗くなることを除いて、すべてが意図したとおりに機能します...これを修正するにはどうすればよいですか？
あなたは内部でボックスシャドウを使用することができます、それは背景の上に置かれます。
例：
html{
color: white;
font-size: 200%;
}
th{
width: 500px;
height: 300px;
background-image: url(https://images.pexels.com/photos/1054655/pexels-photo-1054655.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-position: center;
background-size: 100%;
transition: 1s;
box-shadow:inset 0 0 0 50vw rgba(0,0,0,0);
}
th:hover{
box-shadow:inset 0 0 0 50vw rgba(0,0,0,0.5);
background-size: 125%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table>
<tr>
<th>
<h1>Elephant</h1>
</th>
</tr>
</table>
</body>
</html>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加