1

Не могу никак отстилизовать последнего кота.

введите сюда описание изображения

Через опасити не получается т.к. бек станет прозрачным. Так вот задача состоит в том что-бы оставить бек, сделать данный эффект.

8
  • Вы верстаете, рисуете? Обновите теги что ли, а то не понятно что вам именно нужно.
    – DaemonHK
    22 мая 2019 в 13:08
  • у вас вопрос про фотошоп или про что?
    – teran
    22 мая 2019 в 13:09
  • в любом случае, белую подложку сделайте, хоть в фш хоть в верстке, не?
    – teran
    22 мая 2019 в 13:10
  • Верстаю. И ничего не получается
    – user20477
    22 мая 2019 в 13:11
  • и {opacity:0.5} не помогает?) 22 мая 2019 в 13:13

2 ответа 2

1

Все что нужно это обернуть ваш полупрозрачный див в еще один, где уже будет применяться background. Тем самым opacity применяется к дочернему элементу, родительский не меняется и не просвечивает

body {
  background: #333;
}

.parent {
  background: white;
  position: relative;
  width: 250px;
  height: 150px;
}

.child {
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #009688;
  opacity: .5;
  transition: opacity .3s ease;
}

.child:hover {
  opacity: 1;
}
<div class='parent'>
  <div class='child'></div>
</div>

3
  • Еще раз говорю при опасити нужно будет менять цвет текста,цвет круга. Ибо текст будет прозрачным и черным ,а это я считаю не выход ,плюс не желательно оборачивать другим блоком так как это компонент vue.
    – user20477
    22 мая 2019 в 13:37
  • Ну и? В чем проблема-то? У вас на скрине становится прозрачным все, кроме фона. В моем случае, все что вы поместите в child, будет становиться прозрачным, при этом фон не будет меняться
    – ThisMan
    22 мая 2019 в 13:40
  • @user20477 другим блоком так как это компонент vue обернуть карточку в блок сделав его родительским, в чем проблема?
    – ThisMan
    22 мая 2019 в 13:42
0

Можно расположить сверху белый блок и ему сделать background-color:white; opacity:0.5; или background-color: rgba(255,255,255,0.5);

div.masked {
  background: no-repeat url(https://i.stack.imgur.com/3q67w.gif?s=32&g=1), wheat;
  width: 100px;
  height: 100px;
  margin: 10px;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
}

div.masked:before {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  background-color: rgba(255,255,255,0.5);
  position: absolute;
  z-index: 100;
  transition: 300ms;
  cursor: pointer;
}

div.masked:hover:before {
  background-color: transparent;
}
<div class="masked">hover</div>
<div class="masked">on</div>
<div class="masked">me</div>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.