I have the following HTML code which simply shows an image with a transparent black overlay containing text.
I don't wan't my text to be transparent. I tried with z-index, but my text is still transparent:
What's wrong with my code?
This is my HTML:
<div class="leftContainer">
<div class = "promo">
<img src="images/soon.png" width="415" height="200" alt="soon event" />
<div class="hilight">
<h2>Hockey</h2>
<p>Sample text</p>
</div>
</div>
...
</div>
and this is my css:
.hilight h2{
font-family: Helvetica, Verdana;
color: #FFF;
z-index: 200;
}
.promo {
position: relative;
}
.promo img {
z-index: 1;
}
.hilight {
background-color: #000;
position: absolute;
height: 85px;
width: 415px;
opacity: 0.65;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
bottom: 0px;
z-index: 1;
}
change the background of .hilight to rgba(0,0,0,0.65) and remove the opacity.
.hilight {
background-color: rgba(0,0,0,0.65);
position: absolute;
height: 85px;
width: 415px;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
bottom: 0px;
z-index: 1;
}
You need to set the opacity to the background only, not the entire div and it's contents. You can do this with rgba color selection eg
div {
background: rgba(0,0,0,0.50);
}
The other way of doing it would be to use a semi-transparent png image with some background-position. This would then be multibrowser compatible
For cross browser support use transparent 1x1 pixel png image to do this.
You can generate the image on this site: http://www.1x1px.me/
Then just remove background-color and opacity and simply use background:url(bg.png);
jsFiddle Live Demo
Everything inside will have the opacity of 0.65. Move the text outside the overlay div.
Related
i'm wanting my link titles to have a gradient text. currently, when i change the tooltip to be the gradient text, the gradient ends up working fine, but the background is transparent.
i want to have a colored background so you can actually see the text. i understand that the way the gradient is working is by using a gradient background and then cutting out the text to show it, but i think there has to be a way to overlay the whole text over a background.
i'm not sure exactly how to edit tooltips very well, i'm using someone's code and editing it. i'm attaching a picture of what i'm basically trying to do. (the photo is edited because i haven't been able to actually make this happen lmao).
inside of my tooltip, i want to have the gradient text, the color background behind the gradient text, and a border.
there's a picture of what i currently see,
there's a picture of what happens when i change the text to gradient ,
and there's a picture of what i'm trying to get to .
thank you all in advance for any help you can give me!
#s-m-t-tooltip {
font-family:"georgia";
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
position:absolute;
padding:0px 5px 0px 5px;
margin-top:30px;
border:1px solid black;
z-index:9999;
}
edit - added snippet of tooltip code (i'm new at this site so i'm not sure if this will post the code correctly)
One option, embed the tooltip in another div to manage the background:
Updated 3-Aug-22 per #DavidThomas
.col {
display: inline-block;
width: 250px;
padding: 10px;
}
.outer {
position: relative;
}
.note {
font-size: 8pt;
display: inline-block;
line-height: 1.2em;
}
.pos {
position: absolute;
top: 15px;
left: 15px;
border: 1px solid black;
}
.inner {
background-color: white;
}
.kpb {
font-family: "georgia";
font-size: 14pt;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
padding: 0px 5px;
}
.kpb::before {
content: "Kiwi polar bear";
}
.s-m-t-tooltip {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.dave-thomas {
color: transparent;
background: linear-gradient(to right, red, orange, yellow, lime, indigo, blue, violet), linear-gradient(to bottom, #FFF, #FFF);
-webkit-background-clip: text, border-box;
}
<div class="col">
<span class="note">Single BG overlaid on white div</span><br>
<div class="outer">
<image src="https://picsum.photos/250/200" />
<div class="pos inner">
<div class="kpb s-m-t-tooltip"></div>
</div>
</div>
</div>
<div class="col">
<span class="note">Per Dave Thomas: Two background layers with paired clipping levels (order matters)</span><br>
<div class="outer">
<image src="https://picsum.photos/250/200" />
<div class="pos kpb dave-thomas"></div>
</div>
</div>
I'm creating reports in html and would like users to be able to download them as PDF via the browsers native print functionality. ie ctrl + P or cmd + p
I've discovered an issue when print in Firefox, the browser seems to not allow printing in a white font color.
The expected behaviour:
let's say I have a basic div with purple background color and white text. I would expect the browser to render that element exactly like that and also print the page to pdf exactly like that.
Actual behaviour:
In Firefox only, the browser changes any font which is deemed too light to black. This could be a font colour which is white or any colour that is close to white ie a light grey.
Is there a way with CSS or other that I can force it to print to PDF any white font colors exactly white?
Worth noting: I had a similar issue with Firefox not rendering background colours on elements, I got around that by using the following CSS rules on the element that didn't have the background color rendering, this however doesn't seem to fix the light font color issue:
-webkit-print-color-adjust: exact;
color-adjust: exact;
I have also included some code to be able to replicate this issue:
<html>
</head>
<body>
<section class="purple">
<div class="page">
<div class="oval single">day-to-day</div>
</div>
</section>
<style>
.oval {
position: absolute;
width: 300px;
height: 60px;
top: 45px;
right: -50px;
border-radius: 50%;
color: #ffffff!important;
text-align: left;
line-height: 24px;
opacity: 0.4;
padding: 15px 15px 15px 50px;
}
.oval span {
color: #ffffff!important;
}
.oval.sub{
top: 108px;
}
.oval.single{
top: 80px;
}
.page {
font-size:24px;
line-height: 34px;
position: relative;
width:1160px;
height:1671px;
padding:100px;
page-break-after: always;
color:#595959;
}
*, body {
-webkit-print-color-adjust: exact !important;
font-family: 'Source Sans Pro', 'Arial', sans-serif;
}
.purple .oval {
background-color: #3c0c5b;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
</style>
</body>
</html>
If you save this to an html file and try printing the page via ctrl + p or cmd + p you will see it renders as it should in the browser as html but not in the PDF.
One workaround is to set the text to transparent and then set text-shadow to the desired print color.
I had success in Firefox 70.0.1 using this solution.
<style>
.oval {
position: absolute;
width: 300px;
height: 60px;
top: 45px;
right: -50px;
border-radius: 50%;
color: transparent;
text-shadow: 0 0 0px #fff;
text-align: left;
line-height: 24px;
opacity: 0.4;
padding: 15px 15px 15px 50px;
}
...
</style>
https://codepen.io/joshmatt/pen/jOOzrEv
Beginner CSS question here.
I have the home page of a website I'm working on set out perfectly. I have two `divs
#desktop-navbar {
text-transform: uppercase;
width: 100%;
height: 90px;
position: fixed;
z-index:1;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 25px;
color: #000000;
font-family: Thasadith;
font-weight: 700;
}
#desktop-navbar #mobile-menu-link{
display: none;
}
#desktop-nav-wrapper nav li:hover {
font-weight: 900;
}
#desktop-nav-wrapper.solid {
transition: background-color 1s ease 0s;
background-color: #eeeeee;
}
#desktop-logo.solid-fonts {
transition: color 1s ease 0s;
background: linear-gradient(90deg, #000 100%, #000 0%) fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#desktop-nav-wrapper nav li.solid-fonts {
transition: color 1s ease 0s;
color: #000000;
}
#desktop-nav-wrapper {
font-weight: bold;
font-size: 18vw;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
height: inherit;
width: 100%;
display: flex;
position: absolute;
}
#home-colour-one {
height: inherit;
width: 33%;
background-color: #314455;
}
#home-colour-two {
height: inherit;
width: 67%;
background-color: #dddddd;
}
<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
<nav>
<ul id = "desktop-nav-content">
<li class="desktop-items">Casa</li>
<li class="desktop-items">Sobre Mi</li>
<li class="desktop-items">Servicio</li>
<li class="desktop-items">Galería</li>
<li class="desktop-items">Contacto</li>
<li id="mobile-menu-link"><a>Menu</a></li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-colour-one">
<h3>Bettoo Kaozink</h3>
</div>
<div id="home-colour-two" class="container">
</div>
</div>
</div>
side by side with different colours (I know I could use one div and use the CSS gradient method, but I want to add some sweet fade-in to both of these divs at a later point).
But I want to place the text on the halfway point between the two divs (so one half is in the blue and the other half is in the grey).
Right now, I only have the text in one div of the home page (home-colour-one), but I'd like it to be spread across the two. Is there a way I can get the text to overflow into the grey div (home-colour-two)? Or just have the text in a separate div and place on the point separating the two divs?
I also know I can have the H3 of Bettoo Kaozink in the nav bar, but that is something I want to avoid. As ideally, I would like Bettoo Kaozink centered vertically in the container.
Cheers
One way to approach this is by using flexbox by adding display: flex to the container. If you haven't learned about how flexbox works, I'd recommend you to read up on this article.
I've created a mini prototype here of what you wanted. There are two things you should do to the JSFiddle in advanced to help you understand the code a bit better:
On line 15 of the CSS code, change the flex-grow property to some other value.
Use JavaScript to center the text relative to the div-container
Once you understand flexbox, it opens a door to so many different options that you can choose from.
I hope that it works out for you. If not, just tell me in the comments.
Honestly the structure of your page, based on what I can understand from here, it's not so solid.
Anyway, just in this context, and if I get right your goal, so having your h3 (or whatever text container you will add then) floating between the two divs [id="home-colour-one" and id="home-colour-two"], and centered vertically, a solution would be adding this ad the end of your CSS:
/* ADD THIS!!!*/
#home-colour-one h3 {
position: absolute;
top:50%; left:16.5%;
transform: translateY(-50%);
}
Here a JS Bin: https://jsbin.com/ralicul/edit?html,css,output
Let's say I have an image like this:
I would like to display transparent letters and fill everything to look something like this:
UPDATE: I would like to display a text with an image one it, that would look like this:
How can I accomplish that using CSS? Thank you in advance!
Use css background-clip property.
Example code:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url('https://i.stack.imgur.com/QqRWG.jpg') no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 200px;
}
<h1>404</h1>
Hope it helps !
you should experiment with css "mix-blend-mode"
In your case css will look like:
background-color: #fff;
color: #000;
mix-blend-mode: screen;
You can check the demo:
body{
background: url('https://i.stack.imgur.com/QqRWG.jpg')
}
p{
background-color: #fff;
color: #000;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: arial;
font-size: 10em;
margin: 0;
line-height: 100vh;
text-align: center;
}
<p>404</p>
CSS has background-clip for this kind of styling:
text
The background is painted within (clipped to) the foreground text.
background-clip among flex and calc can do a simple 404 error page:
h1 {
background:url(https://i.stack.imgur.com/QqRWG.jpg) center;
color:transparent;
background-clip:text;
/* makup for a basic 404 page */
font-size:calc(15vh + 15vw);
display:flex;
height:100vh;
align-items:center;
justify-content:center;
}
* {
margin:0;
}
<h1>404</h1>
I have a block of HTML for showing an image/video with a pattern and text on top of it:
<div id="video_block">
<img src="montage_still.jpg" class="spacer_image">
<img src="montage_still.jpg" class="background_image">
<video width="100%;" height="auto;" muted="" preload="" autoplay="">
Sources
</video>
<div class="overlay_pattern yellow"></div>
<div class="overlay_text center_middle_text">Pride</div>
</div>
More simply, the layers are:
Spacer Image (to define space, not visible)
Image
Video
Overlay Pattern (yellow blocks set to the background)
Overlay Text (white text placed above everything else)
What I am aiming for is the following, which occurs in most browsers over both the image and the video (when loaded/visible):
However, when using Chrome (Mac, 45.0.2454.85, 64-bit) and only when the video is visible, I get the following:
This seems odd, given that when I read, "the mix-blend-mode property defines how an element’s content should blend with its background," I assume that the pattern overlay would blend down with the image/video, leaving the text above it alone. However, it appears that Chrome is giving the text overlay div the same blend effect; both elements change in unison when I change the blend mode to anything else.
The CSS:
img.background_image,
div.video_block video {
position:absolute;
//more styles
}
div.overlay_pattern {
background-color: transparent;
background-image: none;
height: 200vh;
left: 0;
mix-blend-mode: overlay;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
div.overlay_pattern.yellow {
background: url("yellow_pattern.png") repeat scroll;
}
div.overlay_text {
color: #ffffff;
font-family: "Gotham A","Gotham B";
font-size: 8em;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px 2px rgba(60, 60, 60, 0.5);
text-transform: uppercase;
}
div.center_middle_text {
left: 0;
margin: 0 10%;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 80%;
}
Any advice to get consistent behavior for Chrome? (Is this is a bug, perhaps?)