Серые из части изображения

Question

У меня есть изображение, которое покрывает весь элемент, используя что-то вроде #myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;}

Далее, я хотел бы серый цвет с левой стороной изображения, аналогичного показанному ниже.

Как это можно сделать? Это не обязательно должно выглядеть точно так же, но только похоже.

Answer 1

вы могли играть с pseudoelement и RGBA фоне, например,

#mydiv { 
    background: url(http://www.psdgraphics.com/file/cherry-wood.jpg); 
    width: 250px; 
    height: 400px; 
    position: relative; 
} 

#mydiv:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 30%; 
    background: rgba(255,255,255, .3); 
} 

Codepen: http://codepen.io/anon/pen/OyVYwe

---

Или вы могли бы просто добавить прозрачную левую границу элемента, например,

box-sizing: border-box; 
background-origin: border-box; 
border-left: 50px rgba(255,255,255, .3) solid; 

Codepen: http://codepen.io/anon/pen/ZbGNqL

---

Или вы могли бы использовать врезку box-shadow

box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset; 

Codepen: http://codepen.io/anon/pen/avOrXE

Answer 2

Вы можете использовать линейные градиенты-так как вы используете background-image

html { 
 
    min-height: 100%; 
 
    background: 
 
    linear-gradient(to right, rgba(0, 0, 0, 0.75) 60px, transparent 60px), /* the gray, reset opacity to your needs : here 0.75 */ 
 
    linear-gradient(to right, transparent 60px, red 60px, red 64px, transparent 64px), /* a red line ? */ 
 
    url(http://lorempixel.com/200/200/fashion) /* and finally, image laying underneath gradients */; 
 
    background-size: 
 
    auto, 
 
    auto, 
 
    auto 100%; 
 
}

Answer 3

Пожалуйста, не голосуйте за этот ответ, как это было замечание user3791372 в (пока еще не ответ), а не моя. Если вы считаете, что это правильный подход, укажите комментарий, почему вы так думаете.

http://codepen.io/anon/pen/MaaWMB

<div id="mydiv"> 
    <div id="sidebar"></div> 
</div> 

#mydiv { 
    background: url(http://www.psdgraphics.com/file/cherry-wood.jpg) bottom; 
    width: 230px; 
    height: 400px; 
} 

#sidebar { 
    background-color: white; 
    opacity: 0.2; 
    filter: alpha(opacity=20); 
    width: 50px; 
    height: 100%; 
}