how to make text transparent without changing to an image using css
I have a navigation bar that tells the user which page is selected by a change in text colour and a black background. I want to make only the text inside the current page nav transparent. Example here: sammarchant.co.uk/new — scroll down to grey area to view I have researched using CSS3 but no luck, I want to keep load times down to the very minimum hence not wanting to use an image.
5 Answers 5
This isn’t possible with plain CSS/CSS3.
Even if you did make the text transparent, it wouldn’t appear grey when scrolling over the grey area. If the text was transparent, it would show the black background behind it.
You could however use some javascript to detect what the background is, and change the color of the font depending on this.
Yeah I just wanted to match the square logo on the left so that the rest of the design shows through when scrolling.
Another way to do this in pure CSS, without using images is to use a custom font. All you have to do is find/create a font, in which the characters are transparent letters with black background. Similar to this font
You can place an appropriate font on your server and import it using CSS @font-face rule
Yes I had that idea myself last night although I would need the Nevis font glyphs and then edit them in Font software, and these wont be easy to find.
@SamMarchant now that I think of it, adding a custom font would be as bad for load times as images. I’m afraid images are the best solution here after all. Just reduce their size by keeping the color space as small as possible. Another option is to experiment with SVG. However, the file size reduction is most visible for simple, large images. These are really small so the code can as well turn out to take as much space as pictures.
Как сделать background прозрачный, а текст нет?
Подскажите пожалуйста как сделать background должен быть прозрачный а текст на нем должен нормально отображаться без прозрачности?
Оценить 2 комментария
Я чуть чуть не правильно выразился. Бэк должен быть полу прозрачный (желтый фон) а текст на нем должен быть нормальный.
Вот то что должно быть https://yadi.sk/i/3ml4q9Wgjed7t
Скажите пожалуйста как можно реализовать такой блок, через таблицы?
Я чуть чуть не правильно выразился. Бэк должен быть полу прозрачный (желтый фон) а текст на нем должен быть нормальный.
Вот то что должно быть https://yadi.sk/i/3ml4q9Wgjed7t
Скажите пожалуйста как можно реализовать такой блок, через таблицы?
используйте rgba() или hsla()
Задайте цвет, напрмер так:
background-color: rgba(39,47,51, 0.5);
или так:
background-color: hsla(200,13%,17%, 0.5);
Где 0,5 будет прозрачность Вашего фона.
Подробнее можно узнать тут.
Вот то что должно быть https://yadi.sk/i/3ml4q9Wgjed7t
Скажите пожалуйста как можно реализовать такой блок, через таблицы?
Максим: А зачем Вам жизнь усложнять древностями? Блочной версткой все намного проще, удобнее и читабельнее получится. Просто нужным блокам задавайте полупрозрачные цвета.
Просто для каждого отдельного блока создавать новый div? Я просто только начинаю и не очень много знаю как лучше сделать
Найди ответ на свой вопрос. Весь мир верстает блоками, таблицы оставьте археологам и для таблиц на сайте.
Прозрачный текст на фоне
Но зеленый цвет обесцвечивается
@Айболит А, где я сопротивлялся? Просто предложил еще варианты. Например, я люблю поизвращаться с реализацией всяких приколов, типа исования на css2, аякс без js и т.п.
4 ответа 4
Используя canvas (XOR), и функцию переноса строк, вполне можно реализовать что-то похожее. Работает это быстро, и в принципе может быть использовано в адаптиве, придется лишь выбирать размеры канваса и шрифта.
const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => < const words = text.split(' '); let line = ''; for (const [index, w] of words.entries()) < const testLine = line + w + ' '; const metrics = ctx.measureText(testLine); const testWidth = metrics.width; if (testWidth >maxWidth && index > 0) < ctx.fillText(line, x, y); line = w + ' '; y += lineHeight; >else < line = testLine; >> ctx.fillText(line, x, y); > const drawText = (text, fontSize, width, height, background) => < const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.setAttribute('width', width) canvas.setAttribute('height', height) ctx.fillStyle = background; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = 'xor'; ctx.font = `$px Courier bold`; wrapText(ctx, text, 0, fontSize, width, fontSize * 1.2) document.body.appendChild(canvas) > drawText('#котики #cats #pets', 60, 500, 200, '#39B085D9')How to create transparent text on non-transparent background
Imagine that: there is a background assigned to «body» and a white «div» with a text inside of it. And this text is so that we can see the background through it. How to implement that with CSS? Like this:
3 Answers 3
You can use SVG to create a mask with a rect element for the white background and a text element for transparent text part.
body < margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg'); background-size: cover; height: 100vh; background-position: center; font-family: 'Open Sans', sans-serif; >svg < width: 300px; height: 100px; >svg text < text-anchor: middle; >svg #overlay < fill: white; opacity: 0.7; >svg #text < font-size: 40px; font-weight: bold; >svg #r Update: To create full element size overlay with transparent text you can use position: relative on parent element and position: absolute on svg and set mask height and width to 100% . To center the text you can use dy: 50% with alignment-baseline: middle; and text-anchor: middle;
body < margin: 0; padding: 0; >.element < margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg'); background-size: cover; height: 100vh; background-position: center; font-family: 'Open Sans', sans-serif; position: relative; >section < height: 100vh; background: lightgreen; >svg < position: absolute; left: 0; right: 0; top: 0; height: 100%; width: 100%; >svg text < text-anchor: middle; alignment-baseline: middle; font-size: 40px; font-weight: bold; >svg #overlay < fill: white; opacity: 0.7; >svg #r