Текст в оттенках серого поверх изображения обложки

ProgramBox

Текст в оттенках серого поверх изображения обложки

Post author:admin
Запись опубликована:15 марта, 2023
Post category:Вопросы по программированию

#html #css #svg #css-shapes

#HTML #css #svg #css-фигуры

Вопрос:

Я пытаюсь создать макет, подобный этому:

Я знаю, что могу создать «A», используя svg или clip-path, но проблема в том, что я хочу, чтобы фон внутри «A» был выровнен с фоном основного текста, т.е. Если окно изменяет размер, фоновое изображение будет реагировать так же, как реагирует обложка, и так должно быть изображение внутри «A».

У меня заканчиваются идеи о том, как я могу это сделать… последнее, о чем я могу думать, это использовать background-attachment: fixed и создавать букву «A» с использованием сложного CSS, такого как множество divs с разной шириной / высотой, радиусом границы, переводом и т. Д., Чтобы создать букву «A».

РЕДАКТИРОВАТЬ: я думаю, что я не прояснил ситуацию, поэтому, пожалуйста, проверьте эту демонстрацию того, чего я пытаюсь достичь. Обратите внимание, как пятно серого остается выровненным с текстом div при изменении размера браузера, в то время как фоновое изображение имеет ширину и высоту покрытия независимо от размера порта просмотра, а изображение внутри пятна изменяется для отображения того же места… Я просто хочу иметь более сложную форму, например, A или Z, вместо этой нечетной формы.

1. Вы хотите, чтобы изображение буквы «А» с остальным фоном было в формате оттенков серого, и при изменении его размера содержимое этого изображения менялось?

2. @Stewartside Да, хотя, если бы мы могли иметь отдельное изображение для inside «A», чтобы иметь больше контроля, было бы лучше, но даже просто серая шкала была бы потрясающей.

3. @ImranBughio почему бы вам просто не использовать фоновое изображение со встроенной в него буквой «А» и необходимыми фильтрами?

4. @web-tiki Я хотел бы, чтобы это было так просто, но предполагается, что буква «А» должна совпадать с этим текстом, а фоновое изображение будет охватывать всю ширину окна…

Ответ №1:

Вот подход, который вы могли бы использовать для быстрого размещения вашего письма с помощью SVG.

Смысл в том, чтобы использовать изображение дважды, одно в оттенках серого, а другое в обычном режиме. Затем вы можете замаскировать обычное изображение текстом (тот же подход, что и в этом codepen), чтобы появилось изображение в оттенках серого. Вот пример:

 svg {
  display: block;
  width: 100%; height: auto;
}

 <svg viewbox="0 0 300 200">
  <defs>
    <mask id="textMask" x="0" y="0" width="300" height="200">
      <rect x="0" y="0" width="300" height="200" fill="#fff" />
      <text text-anchor="middle" x="100" y="150" dy="1" font-size="150">A</text>
    </mask>
    <filter id="deSaturate">
      <feColorMatrix in="SourceGraphic" type="saturate" values="0" />
    </filter>
    <image id="image" xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="300" height="200" />
  </defs>
  <use xlink:href="#image" filter="url(#deSaturate)" />
  <use xlink:href="#image" mask="url(#textMask)" />
</svg>

1. Это аккуратный трюк, но я боюсь, что моя проблема не может быть решена с помощью этой техники… проверьте этот пример , как вы можете видеть, предполагается, что фоновое изображение покрывает все тело, в то время как элемент в оттенках серого должен придерживаться средней части, сохраняя при этом то же положение основного изображения внутри него..

2. Наверное, я плохо объясняю эту проблему, надеюсь, на этот раз вы поняли мою точку зрения…

3. Я планирую использовать пример, которым я поделился с вами, до конца, т.е. Создавать множество маленьких фигур, которые в сочетании выглядят как «А» … беспорядочно, но единственное решение, которое, по моему мнению, даст то, что я хочу.

Ответ №2:

Вы могли бы использовать clip-path и указывать на SVG <clipPath> . Работает во всем, кроме IE.

 .wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  
  -webkit-background-size: cover;
  background-size: cover;
}

.txt {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  color: #fff;
  max-width: 500px;
  padding-top: 20px;
  margin: 50px auto;
  position: relative;
}

.a{
  position: absolute;
  left: -100px;
  top: 0;
  width: 100px;
  height: 100px;
  clip-path: url(#tri);
  -webkit-clip-path: url(#tri);

  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  background-size: cover;
  
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

 <div class="wrap">
  <div class="txt">
    <div class="a"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsum, distinctio molestiae iste ab eum tempore excepturi fugit placeat veniam. Hic minus dolorum, reprehenderit atque, nobis rerum. Quis incidunt, beatae!
  </div>
</div>

<svg width="0" height="0">
  <clipPath id="tri" clipPathUnits="objectBoundingBox">
    <path d="M 0.5,0 L 1,1, 0,1 Z
             M 0.5,0.3 L 0.3,0.7 L 0.7,0.7 Z"/>
  </clipPath>
</svg>

Демонстрационная скрипка

1. Спасибо, приятель, я действительно хотел, чтобы это поддерживалось и в IE, но, думаю, я просто добавлю белый png с непрозрачностью для пользователей IE.

2. Ваш path тег работает нормально, но когда я экспортирую путь из Illustrator, он просто не работает … вы можете помочь, пожалуйста? вот демонстрация с контуром в форме буквы «М», но вместо этого он показывает прямоугольник, поскольку к нему не был применен путь клипа.

3. При использовании clipPathUnits="objectBoundingBox" значения координат в пути должны находиться в диапазоне от 0 до 1. Исправление для вашего примера заключается в добавлении преобразования к пути, которое масштабирует его до этого диапазона. Рабочий пример: jsfiddle.net/k7cmxh7q/4

Ответ №3:

Как насчет чего-то вроде filter свойства? Краткое демонстрационное изображение можно увидеть ниже:

 .background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(http://lorempixel.com/600/400);
}
.background:before {
  content: "A";
  color:white;
  position: absolute;
  font-size: 300px;
  top: 50%;
  left: 50%;
  opacity: 0.4;
  transform: translate(-50%, -50%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

 <div class="background">

</div>

1. Дизайнер снабдил изображение множеством сложных фильтров и других настроек, которые, я уверен, не могут быть достигнуты в CSS.

2. Изображение в моем вопросе — это то, которое я сделал, высмеивая конечный результат, в котором намного больше фильтров.

3. Я должен сказать, что сейчас я немного смущен — что именно вы спрашиваете?

4. вы добавили оттенки серого в «:before», но это не работает

5. Я считаю, что на самом деле это можно сделать только с помощью CSS с помощью background-filter, но это было бы не слишком полезно, учитывая, что он полностью поддерживается Safari:(