Div еще виден с background-color: прозрачный; - PullRequest
Новая
       2

Div еще виден с background-color: прозрачный;

3 голосов
/ 04 апреля 2019

Я пытаюсь сделать div прозрачным, чтобы была видна только тень от коробки.

CSS 

.circle{
    position: absolute;
    background-color: transparent;
    left: 100px;
    top: 100px;
    min-width: 500px;
    min-height: 500px;
    box-shadow: 0 0 300px rgba(255, 000, 048, 1);
    border-radius: 300px;
}

Это результат https://i.imgur.com/8xNg5wc.png

Как вы можете видеть круг такого же цвета, что и фон

Что я на самом деле хочу, так это чтобы вы видели эффект тени через круг

(я сместил тень) вообразите что-то подобное без этого круга https://i.imgur.com/i55o2IL.png

Ответы [ 3 ]

0 голосов
/ 04 апреля 2019

Извините, я неверно истолковал ваш вопрос раньше.Вам нужно что-то подобное? 

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">

.circle{
    left: 100px;
    top: 100px;
    min-width: 500px;
    min-height: 500px;
    background-color: red; 
    background-image: radial-gradient(circle, red, white);
}
</style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

Пример здесь: http://tpcg.io/zod3S3

0 голосов
/ 04 апреля 2019

Мне трудно понять, что именно вы ищете, но попробуйте это: 

.circle {
  position: absolute;
  background-color: inherit;
  left: 100px;
  top: 100px;
  width: 500px;
  height: 500px;
  box-shadow: 0 0 300px rgba(255, 000, 048, 1);
  border-radius: 300px;
}
0 голосов
/ 04 апреля 2019

Другим решением будет использование радиального градиента: 

.circle {
  background-color: #000;
  background-image: radial-gradient(circle at center, rgb(255, 000, 048), #000 300px);
}

Вот еще одно решение, но оно не будет работать так же, как первое предложение. 

.circle {
    position: absolute;
    background-color: rgb(255, 000, 048);
    left: 100px;
    top: 100px;
    min-width: 500px;
    min-height: 500px;
    border-radius: 50%;
    filter: blur(300px);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...