Могу ли я сделать прозрачность нокаута / пробивки через шрифты CSS? - PullRequest
Новая
       2

Могу ли я сделать прозрачность нокаута / пробивки через шрифты CSS?

8 голосов
/ 18 февраля 2010

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

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

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

Ответы [ 6 ]

10 голосов
/ 18 февраля 2010

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

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

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

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

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

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

Редактировать

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

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

<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>

с помощью составления детонации и рисования текста на canvas.

6 голосов
/ 18 февраля 2010

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

  1. Свойство CSS opacity применяется ко всему элементу, а не только к его тексту.Поэтому, если у вас есть этот HTML: 

    <div class="opacity-50">
    This is a div with a background colour and 50% opacity
</div>

    И этот CSS: 

    .opacity-50 {
    background: #ccc;
    color: #000;
    opacity: 0.5;
}

    , тогда и фон, и текст будут иметь непрозрачность 50%.

  2. rgba значения цвета позволяют вам указывать полупрозрачные цвета.Итак, если у вас есть этот HTML: 

    <div class="text-opacity-50">
    This is a div with semi-transparent text
</div>

    И этот CSS: 

    .text-opacity-50 {
    background: #ccc;
    color: rgba(0,0,0,0.5);
}

    , тогда только его текст будет иметь непрозрачность 50%.

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

4 голосов
/ 19 февраля 2010

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

За исключением WebKit (механизм рендеринга в Safari и Chrome), который имеет полностью настраиваемое значение свойства made-by-Dave-Hyatt, not-even-in-CSS-3, -webkit-background-clip: text;.

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

1 голос
/ 04 декабря 2013

Вы можете потратить время на то, чтобы создать свой собственный шрифт с InkScape и IcoMoon и сделать отрицательный нокаутированный шрифт, тогда ваши буквы будут видны через корыто!Я использовал эту технику для некоторых см. Иконки корыта.

0 голосов
/ 27 февраля 2013

Использование .png без фона - хороший метод. В фотошопе вы можете сохранить для Интернета.

или в формате css: 

#div
{
    background:transparent;
    color:whatever;

}
0 голосов
/ 08 июля 2011

Почему бы не попробовать установить для фонового изображения DIV полностью прозрачный GIF?

http://www.pageresource.com/dhtml/csstut9.htm

...