Изменить размер тени, а не фактический png - PullRequest
Новая
       32

Изменить размер тени, а не фактический png

0 голосов
/ 02 декабря 2018

Я пытаюсь нанести тень на кадр, представляющий собой png с изображением внутри, и я не хочу, чтобы тень проходила над изображением.Можно ли вырезать или изменить размер тени? 

.grid {
  display: grid;
  }

.box8 { /*Girl*/
    grid-area: 1 / 1 / 1 / 1;
    margin: auto;
    z-index: -1;
}

.frame1 { /*Rectangular gold frame*/
    grid-area: 1 / 1 / 1 / 1;
    filter: grayscale(20%);
    margin: auto;
    -webkit-filter: drop-shadow(15px 25px 20px #222); /*Makes the shadow fit the png-image*/
    filter: drop-shadow(15px 25px 20px #222);
}
		<div class="grid">
    <div class="box8">
			<img src="https://pbs.twimg.com/profile_images/774007491130785792/hAtxoNuW_400x400.jpg" width="240" height="300">
		</div>
    
    <img class="frame1" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
    </div>

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

Как насчет добавления второго экземпляра кадра, размещения его позади рисунка и создания на нем тени?Это хакерство, но это работает.Как то так: 

.grid {
  display: grid;
  }

.box8 { /*Girl*/
    grid-area: 1 / 1 / 1 / 1;
    margin: auto;
    z-index: -1;
}

.frame1 { /*Rectangular gold frame*/
    grid-area: 1 / 1 / 1 / 1;
    filter: grayscale(20%);
    margin: auto;
}

.frame2 { /*Rectangular gold frame*/
    grid-area: 1 / 1 / 1 / 1;
    filter: grayscale(20%);
    margin: auto;
    -webkit-filter: drop-shadow(15px 25px 20px #222); /*Makes the shadow fit the png-image*/
    filter: drop-shadow(15px 25px 20px #222);
    z-index:-2;
}
<div class="grid">
    <div class="box8">
			<img src="https://pbs.twimg.com/profile_images/774007491130785792/hAtxoNuW_400x400.jpg" width="240" height="300">
		</div>
    <img class="frame1" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
    <img class="frame2" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
</div>
0 голосов
/ 02 декабря 2018

попробуйте вместо этого: то есть замените фильтр: drop-shadow на box-shadow 

.grid {
  display: grid;
  }

.box8 { /*Girl*/
    grid-area: 1 / 1 / 1 / 1;
    margin: auto;
    z-index: -1;
}

.frame1 { /*Rectangular gold frame*/
    grid-area: 1 / 1 / 1 / 1;
    filter: grayscale(20%);
    margin: auto;
    box-shadow: 15px 25px 20px #222; /*this is changed*/
}
...