Я могу сделать knock-out/punch-through прозрачность со шрифтами CSS?

Question

Я могу сделать knock-out/punch-through прозрачность со шрифтами CSS?

Я хотел бы знать, существует ли какой-либо способ, которым я могу применить 100%-ю прозрачность для отправки текстовых сообщений так, чтобы мы видели фоновое изображение страницы в символах в тексте.

т.е. предположите, что у меня есть a <div> с белым фоном и фоновым изображением на <body>. Я хотел бы установить текст в <div> так, чтобы фоновое изображение на <body> будьте видны через текст, несмотря на белый фон на <div>.

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

8

css transparency opacity

задан Paul D. Waite 2 October 2013 в 15:56

3 ответа

Я не совсем понимаю, о чем вы спрашиваете (100% прозрачность означает, что что-то невидимое, а невидимый текст, как правило, не очень хорошая идея), но в целом:

Свойство CSS opacity применяется ко всему элементу, а не только к его тексту.Итак, если у вас есть этот HTML:
```
  
Это div с цветом фона и непрозрачностью 50% 
 
 {{1} } 
```
И этот CSS:
```
 .opacity-50 {
background: #ccc; 
color: # 000; 
opacity: 0.5; 
 } 
 
```
Тогда и его фон, и его текст будут иметь 50% непрозрачности. Значения цвета
rgba позволяют указать полупрозрачные цвета. Итак, если у вас есть этот HTML:
```
  
Это div с полупрозрачным текстом 
 
 {{1} } 
```
И этот CSS:
```
 .text-opacity-50 {
background: #ccc; 
color: rgba (0,0,0,0.5); {{1} }} 
 
```
Тогда только его текст будет иметь непрозрачность 50%.

Я думаю, что значения цвета rgba поддерживаются немного меньшим количеством просмотров, чем непрозрачность .

6

ответ дан 5 December 2019 в 07:58

Ах - если вы говорите о "сквозной" прозрачности, то нет, CSS этого не делает.

За исключением WebKit (движок рендеринга в Safari и Chrome), который имеет совершенно пользовательское, придуманное Дэйвом Хайаттом, не входящее даже в CSS-3 значение свойства, -webkit-background-clip: text;.

Ни один другой браузер, кроме Safari и Chrome, не поддерживает его.

4

ответ дан 5 December 2019 в 07:58

Другие вопросы по тегам:

css transparency opacity

Похожие вопросы:

score 10 · Accepted Answer

Он должен быть динамическим? Единственный способ сделать это - использовать изображение с прозрачностью (GIF или, лучше, PNG).

Я не уверен, что вы этого хотите, но все равно объясню.

Ситуация: у вас непростой фон, который вы хотите видеть сквозь текст.

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

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

Этот вид уловки в настоящее время невозможен с чистым CSS (возможно, с Javascript).

Править

Увидев находку Пола на webkit , я задумался, как имитировать такое поведение в Firefox, Opera и IE. Пока мне повезло с использованием элемента canvas в Firefox, и я пытаюсь найти какое-то поведение в фильтре : progid: DXImageTransform.Microsoft .

Пока что с холстом , это то, что я сделал

<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);

// set composite property
ctx.globalCompositeOperation = 'destination-out'; 
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);  
ctx.strokeText("red rectangle", 10, 40);  

</script>
</body>
</html>

, используя компоновку с удалением выделения и рисование текста на холсте .