I have this white small box and i want to make him transparent before starting adding my html code, i searched already how to do that but i didnt find any type of example.
Image:
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script type="text/javascript" src="./script.js" ></script>
</body>
</html>
CSS
* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}
html {
background: transparent;
}
[EDIT]
CSS
html, body {
background: rgba(0, 0, 0, 0.01);
}
div {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.1);
/* border-radius: 16px; */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(11.6px);
-webkit-backdrop-filter: blur(11.6px);
border: 1px solid rgba(0, 0, 0, 0.15);
}
Html
<!-- I added this div -->
<div>
TESTE
</div>
Please improve your question. If you want to make an element transparent with CSS, the easiest way is to add numbers from 0-9 to the end of the color value to get the transparency level you want, for example, white is #fff, to make it transparent experiment with #ffffff0, #ffffff1, #ffffff2, to 9.
Related
I want to make it so when somebody hovers over a button, some glow fades in. I tried that with this code:
.discord_join_button:hover{
color: rgba(255, 255, 255, 1);
box-shadow: 0 0px 60px #2332d8;
animation-duration: 500ms;
}
for some reason this isn't working and the box-shadow just pops into existence
I was expecting it to fade, not just show up
you can achieve the "fade in" effect by specifying the transition property to the button base style. For example:
.discord_join_button {
color: rgba(255, 255, 255, 1);
transition: all 200ms ease;
}
.discord_join_button:hover {
box-shadow: 0 0 60px #2332d8;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition</title>
</head>
<body>
<button class="discord_join_button">Hover me</button>
</body>
</html>
If you want to know more about the transition property: here.
.discord_join_button{
color: rgba(255, 255, 255, 1);
box-shadow: 0 0px 60px rgba(0,0,0,0);
transition: 500ms;
}
.discord_join_button:hover{
box-shadow: 0 0px 60px rgba(0,0,0,1);
}
Use rgba.
And transition should be applied before hover.
I don't know if it's what you want, but if you write the box-shadow value in reverse, it's also possible to make it work in reverse.
I want to create a gradient with lines moving in both directions, but at a 45 degree angle. with html and css.
How can I do the same lines, but in an opposite direction.
This is the code I used below to produce the image above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.repeating-linear {
background: repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
);
}
</style>
</head>
<body>
<div class="repeating-linear" style="width: 200px;height: 50px; border: 1px solid red;">
</div>
</body>
</html>
So you want cross lines, you can stack gradients as proposed below:
<div class='repeating-linear' />
.repeating-linear{
width: 200px;
height: 50px;
border: 1px solid red;
background:
repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
),
repeating-linear-gradient(
45deg,
black 4px,
transparent,
transparent 10px
);
}
jsfiddle sample: https://jsfiddle.net/4rL7n8xo/
result:
I cant get my background to open with the live server. I am not sure what I did wrong. I have attached both my index.html sheet and my style.css sheet. All that appears is a grey screen for my background instead of the image. I am going to put login information on top of the background thats why I used linear-gradient.
* {
margin: 0;
padding: 0;
}
.hero {
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(123.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Global Automation Timesheet</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hero">
<div class="form-box"></div>
</div>
</body>
</html>
.hero {
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/123.jpg');
background-position: center;
background-size: cover;
position: absolute;
}
Use apostrophes '' in url('123.jpg'). Also be sure, that you correctly wrote image location.
This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 2 years ago.
This is how my webpage looks like:
I used the following image as the background:
How can I have black transparent overlay on the image, so it looks like the following:
Here is my html and CSS code:
<!DOCTYPE html>
<html>
<head>
<title>Background Image</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body{
margin-top: 53px;
}
.jumbotron {
background-image: url("background1.jpg");
text-align: center;
height:522px;
background-size: cover;
}
</style>
<body>
<section id="page-top">
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" style="font: 120px Verdana,sans-serif; margin-top: 35px; color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate">Matt Williams</p>
<p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:white;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-lg-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
</div>
</section>
</body>
</html>
You can add a transparent gradient before the url background:
.jumbotron {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background1.jpg");
}
For example:
body {
background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://picsum.photos/id/896/640/480);
}
Helow guys, i tried z-index and other positioning to put the background color with transparency on the front after the background image, however i failed. Can anyone suggest an idea to solve the issue. Thanks you so much.
body,
html {
margin: 0;
padding: 0;
}
html {
background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: cover;
background-repeat: no-repeat;
}
body {
background-color: rgba(201, 76, 76, 0.5);
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jury Portfolio</title>
</head>
<body>
</body>
</html>
Add 100% height on body and html. The issue was your body element taking 0 height. Hence the background-color was not visible.
No need for z-index since body is already a child of html.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
html {
background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: cover;
background-repeat: no-repeat;
}
body {
background-color: rgba(201, 76, 76, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jury Portfolio</title>
</head>
<body>
</body>
</html>
Use multiple background and no need to define height. Simply rely on background propagation:
html,body {
margin:0;
padding:0;
}
html {
background-image:
linear-gradient(rgba(201, 76, 76, 0.5),rgba(201, 76, 76, 0.5)),
url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: 100px 100px,cover;
background-repeat: repeat,no-repeat;
}
Please Try This:-
body,
html {
margin: 0;
padding: 0;
}
html {
background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(201, 76, 76, 0.5);
}