背景画像に対して薄く白くするためにbackgro-colorをあてたいです。
以下のように行うことができると思います。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>タイトル</title>
6 <style type="text/css">
7 .box {
8 position: relative;
9 width: 150px;
10 height: 150px;
11 background: rgba(255, 255, 255, .5) url("http://placehold.jp/3d4070/ffffff/150x150.png?text=image");
12 }
13
14 .box::before {
15 position: absolute;
16 top: 0;
17 right: 0;
18 bottom: 0;
19 left: 0;
20 content: ' ';
21 background-color: inherit;
22 }
23 </style>
24</head>
25<body>
26<div class="box"></div>
27</body>
28</html>
また、グラデーションも当てたいです。
以下のように行うことができると思います。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>タイトル</title>
6 <style type="text/css">
7 .box {
8 width: 150px;
9 height: 150px;
10 background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url("http://placehold.jp/3d4070/ffffff/150x150.png?text=image");
11 }
12 </style>
13</head>
14<body>
15<div class="box"></div>
16</body>
17</html>