This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
Opacity of background-color, but not the text [duplicate]
(5 answers)
Closed 4 years ago.
I find myself having problems in controlling the opacity of my items inside my container. The container should be the only one that is transparent but unfortunately all the items inside my container began to go transparent even though I already establish opacity: 1; to them.
Here is my code...
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dino-Jump</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body class = "bg">
<div id = container>
<img src="Pics/user.jpg" id = "user">
<form action = "action-login">
<div id = "login-box">
<h1 class = "label1">Login</h1>
<div class = "textbox">
<i class = "fa fa-user" aria-hidden = "true"></i>
<input type="text" name="uname" placeholder="Username" required = "true">
</div>
<div class = "textbox">
<i class = "fa fa-lock" aria-hidden = "true"></i>
<input type="password" name="pword" placeholder="Password" required = "true">
</div>
<input class = "btn" type = "button" name = "login" value = "Login">
<a id = "forget" href=""> Forget Password </a>
<a id = "reg" href=""> Register </a>
</form>
</div>
</div>
<img src="Pics/title.png" id="game-title">
<div class = "footer">
<p>© Copyrights Dino-Jump ZRH.Group 10.20.20.18.2.37</p>
</div>
</body>
</html>
CSS
/**Style**/
#import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
#media screen and (min-width:768){
.bg{
width: 100%;
margin: 0 auto;
padding: 0 auto;
display: block;
font-family: sans-serif;
background-image: url("Pics/bg.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
img{
width: 100%;
}
}
/**bofy**/
.bg{
margin: 0 auto;
padding: 0 auto;
font-family: sans-serif;
background-image: url("Pics/bg03.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
#user{
opacity: 1;
background-image: url("Pics/user.jpg");
width: 135px;
height: 135px;
margin: 0 auto;
padding: 0 auto;
border-radius: 50%;
border: 4px solid #ffbd04;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
#container{
opacity: 0.5;
margin: 0 auto;
padding: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 380px;
height: 480px;
background: #000;
border: 4px solid #ffbd04;
border-radius: 20px;
}
#login-box{
opacity: 1;
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
#login-box h1{
float: left;
font-size: 40px;
border-bottom: 4px solid #ffbd04;
margin-bottom: 50px;
padding: 13px 0;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #ffbd04;
}
.texbox i{
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: #fff;
font-size: 18px;
width: 80%;
float: left;
margin: 0 10px;
}
::placeholder {
color: #fff;
}
[placeholder]:focus::-webkit-input-placeholder {
transition: text-indent 0.3s 0.3s ease;
text-indent: -100%;
opacity: 1;
}
.btn{
width: 100%;
background: none;
border: 2px solid #ffbd04;
border-radius: 10px;
color: #fff;
padding: 5px;
font-size: 18px;
margin: 12px;
transition: .6s;
overflow: hidden;
}
.btn:focus{
outline: none;
}
.btn:before{
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,.5);
opacity: 0.5;
filter: blur(30px);
transform: translateX(-130px) skewX(-15deg);
}
.btn:after{
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,.5);
opacity: 0;
filter: blur(30px);
transform: translate(-100px) scaleX(-15deg);
}
.btn:hover{
background: #ffbd04;
cursor: pointer;
}
.btn:hover:before{
transform: translateX(300px) skewX(-15deg);
opacity: 0.6;
transition: 0.7s;
}
.btn:hover:after{
transform: translateX(300px) skewX(-15deg);
opacity: 1;
transition: 0.7s;
}
/**Footer**/
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #000;
color: #fff;
text-align: left;
font-size: 8px;
}
#game-title{
width: 130px;
height: 40px;
position: absolute;
top: 91%;
left: 50%;
transform: translate(-50%,-50%);
}
#forget{
text-decoration: none;
position: absolute;
top: 110%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffbd04;
font-size: 12px;
font-family: sans-serif;
}
#reg{
text-decoration: none;
position: absolute;
top: 110%;
left: 50%;
transform: translate(-50%, -190%);
color: #ffbd04;
font-size: 12px;
font-family: sans-serif;
}
Sorry long post and thank you in advance.
The approach is wrong sir. It's child element's default behavior. You can't set opacity:1 to the child element once you set it to the parent element.
You have so many ways to achieve this. But since you are using a background color and looking for the opacity I suggest the easiest way that use background:rgba(0,0,0,0.5).This stands that the background color is #333 with the opacity of 0.5.
Learn more about rgba() here.
#container{
/*opacity: 0.5;*/ //remove this line
margin: 0 auto;
padding: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 380px;
height: 480px;
/*background: #000;*/ //remove this line
border: 4px solid #ffbd04;
border-radius: 20px;
background:(0,0,0,0.5); //newly added line
}
You have given opacity:0.5 to container class and opacity:1 to child class. Instead of setting opacity to parent class use background color in rgba format to container class and remove opacity
background: rgba(0, 0, 0, 0.5);
If you use opacity to parent class then child class does not have effect even if you set high opacity to child.
I was able to get some result by using the !important keyword.
#login-box{
opacity: 1 !important;
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff !important;
}
You can't see the text, but you might able to get what you want from there.
Related
Currently I'm working on a website for a community and its getting a bit difficult, I have a nice pink>orange gradient with a image below it with a opacity of 0.2, to show both. That looks like this.
As you can see, the logo also has the opacity. I already found something about the rgba-color, but that did'nt work.
How can I solve this problem? I want the image with the border to have a full opacity.
body {
background-color: #f2f2f2;
color: #404040;
}
div.navbar {
height: 600px;
background: rgba(255, 255, 255, 0.7);
background-image: linear-gradient(25deg, #ec008c, #fc6767);
margin-top: -10px;
margin-left: -5px;
position: relative;
width: 105%;
}
img.logo {
position: absolute;
margin-top: 4%;
margin-left: 25%;
height: 40%;
padding: 25px;
border: 25px solid #f2f2f2;
border-radius: 50%;
}
div.image {
position: relative;
height: 100%;
opacity: 0.2;
background-image: url("img/slide1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div.nav {
position: absolute;
bottom: 0;
margin-left: 600px;
margin-bottom: 50px;
}
a.nav-item {
color: #f2f2f2;
font-weight: bold;
font-size: 25pt;
margin-right: 50px;
text-decoration: underline;
}
a.nav-item:hover,
a.nav-item .active {
text-decoration: overline underline;
}
<div class="navbar">
<img class="logo" src="img/logo.png">
<div class="image">
</div>
<div class="nav">
<a class="nav-item">Home</a>
<a class="nav-item">Twee</a>
</div>
</div>
Use the background property for both image and gradient. then take your gradient from the rgba equivalents of your hex values (Chrome dev tools color picker is good for this).
body {
margin: 0;
}
div.navbar {
height: 100vh;
/*
IMPORTANT BITS:
- ADDED image and gradient to navbar background and
- REMOVED opacity
THE REST:
The rest was just to make the demo look better/simpler
*/
background:
linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)),
url(http://placeimg.com/1000/600/arch) no-repeat center;
background-size: cover;
position: relative;
}
.logo-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 25%;
height: 0;
padding-top: 25%;
border:25px solid #f2f2f2;
border-radius: 50%;
overflow: hidden;
}
.logo {
width: 90%;
border-radius: 50%;
position: absolute;
top: 5%;
left: 5%;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="navbar">
<div class="logo-wrapper">
<img class="logo" src="http://placeimg.com/200/200/tech/grayscale">
</div>
</div>
</body>
</html>
Child can't override opacity of parent due to how opacity is managed by the browsers.
Simplest way to achieve this is to place the visual child after the parent and then use a negative margin-top to draw the child on top of the parent. You don't need absolute positioning.
.frame{
background-color: #AAAAAA;
opacity: 0.2;
border-radius: 13px;
padding: 21px;
color: #000000;
height: 73px;
}
.frametxt{
margin-top: -73px;
color: #000000 !important;
opacity: 1.0;
}
I'm a real novice and trying to use a web template to design my own website.
I have a basic lightbox gallery and it all works ok, but whatever I have tried, I cannot get a caption to show on the gallery image (not the thumbnail image).
This is a snippet of the html code with a single gallery item:
<div class="gallery-item">
<div class="image">
<div class="overlay">
</div>
<img src="img/gallery/gallery-item1.jpg" alt="image 4">
</div>
I've tried using title="caption" instead of data-title ="caption", but no joy. Here is the css for the lightbox:
#lightbox {
cursor: pointer;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
/* IE Fallback (Solid Colour) */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);
background: rgba(0, 0, 0, 0.7);
-webkit-filter: none !important;
}
#lightbox img {
display: block;
position: absolute;
border: 5px solid #fff;
box-shadow: 0 0 20px #000;
border-radius: 1px;
}
body.blurred > * {
-webkit-filter: blur(2px);
-webkit-transform: translate3d(0, 0, 0);
}
.lightbox-loading {
background: url(../img/loading.gif) center center no-repeat;
width: 31px;
height: 31px;
margin: -16px 0 0 -16px;
position: absolute;
top: 48%;
left: 50%;
}
.lightbox-caption {
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
z-index: 1000;
background: #000;
background: rgba(0, 0, 0, 0.7);
}
.lightbox-caption p {
margin: 0 auto;
max-width: 70%;
display: inline-block;
*display: inline;
*zoom: 1;
padding: 10px;
color: #fff;
font-size: 12px;
line-height: 18px;
}
.lightbox-button {
position: absolute;
z-index: 9999;
background: no-repeat center center;
width: 32px;
height: 32px;
opacity: 0.4;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.lightbox-button:hover,
.lightbox-button:focus {
opacity: 1;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
}
.lightbox-close {
right: 30px;
top: 30px;
background-image: url("../img/close.png");
}
.lightbox-next {
right: 30px;
top: 48%;
background-image: url("../img/next.png");
}
.lightbox-previous {
left: 30px;
top: 48%;
background-image: url("../img/previous.png");
}
any tips / help is welcomed. thanks
The caption is being loaded by the 'data-caption' attribute in your anchor tag.
Your anchor tags currently look like this:
You need to insert the caption like this:
For your own interest, if you look at the javascript in the source files you'll see these lines:
setCaption: function () {
var caption = $(plugin.current).data('caption');
if(!!caption && caption.length > 0) {
plugin.caption.fadeIn();
$('p', plugin.caption).text(caption);
}else{
plugin.caption.hide();
}
},
The second line says:
var caption = $(plugin.current).data('caption');
This is setting the caption to whatever text you have in the data-caption field. If it said .data('title'), then you would use data-title = "my caption"
Hope that helps.
Need more code to check I would say but you do have
.lightbox-caption {
display: none;
}
This would usually hide this class. Maybe try and remove display:none or change to block or inline etc?
I am trying to build a progress bar as seen often within checkouts.
The problem is, that the borders between the arrows are transparent and the whole thing should be responsive.
I got it this far:
http://codepen.io/MrBambule/pen/rVBeoz
But I can't figure out how to get the items of the bar to span the whole width of the parent container (red border in the pen) and stay responsive.
I think I could figure it out with JS but I'd rather have a CSS solution.
Help would be much appreciated.
HTML
<ul class="progress-nav">
<li class="active">
<span>1. FOO</span>
</li>
<li>
<span>2. BAR</span>
</li>
<li>
<span>3. BAZ</span>
</li>
</ul>
CSS
$bar-color: rgba(255, 255, 255, 0.2);
$bar-active-color: rgba(255, 255, 255, 0.6);
$arrow-size: 22px;
body {
background: linear-gradient(left, #803689, #5eb6e4);
}
.progress-nav {
position: relative;
font-size: 0;
margin: 100px auto;
width: 80%;
max-width: 900px;
// dummy border to display the width problem
border: 1px solid red;
li {
position: relative;
color: #fff;
font-size: 12px;
display: inline-block;
width: 20%;
margin-right: 48px;
list-style: none;
background: $bar-color;
padding: $arrow-size 0;
transition: background .5s, color .5s;
span {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-33px) translateY(-35%);
}
&:before,
&:after {
content: '';
position: absolute;
display: block;
top: 0;
transition: all .5s;
}
&:before {
border: $arrow-size solid $bar-color;
border-left-color: transparent;
left: -$arrow-size*2;
}
&:after {
border: $arrow-size solid transparent;
border-left-color: $bar-color;
right: -$arrow-size*2;
}
&:first-child:before {
border: none;
width: $arrow-size*2;
height: $arrow-size*2;
background: $bar-color;
border-radius: 4px 0 0 4px;
}
&:last-child:after {
border: none;
right: -$arrow-size;
width: $arrow-size;
height: $arrow-size*2;
background: $bar-color;
border-radius: 0 4px 4px 0;
}
&.active,
&:hover {
background: $bar-active-color;
color: #000;
&:before {
border-color: $bar-active-color;
border-left-color: transparent;
}
&:after {
border-left-color: $bar-active-color;
}
&:first-child:before,
&:last-child:after {
background: $bar-active-color;
}
}
}
}
you could use something like:
.wrap {
width: 100%;
height: 30px;
z-index:-2;white-space: nowrap;
overflow:hidden;
}
.wrap div:first-child{margin-left:-2%;}
.progress {
margin:0;
margin-left:0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index:-1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
which is responsive to the width of the screen.
It makes use of the transform:skew property for the middle bars, and a small border hack for the two far elements. This results in the output shown below:
Result
NOTE
If you are creating these dynamically (and want them all along the same line), then you will need to alter the width stated in the first css rule (currently set to 23%).
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
When I implemented the background in CSS, it covered the whole page but the length wasn't big enough to cover the content I wanted to write in it. I researched and found a background repeat-y, which I thought would copy the background again, making the page longer. When I code background-repeat: y; }
into CSS, it gives me the length I wanted, but splits the background so it doesn't cover the whole page. Most of it is white. What am I doing wrong? Thanks.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<div id="content">
<header>
<div class="grow">
<ul>
<li>Home</li>
<li>About me</li>
<li>What I love</li>
</ul>
</div>
</header>
<h1>About Me</h1>
<img src="ben.jpg" id="ben">
<b><h2>The beginning of coding:</h2></b>
<img src="runescape.jpg">
</div>
<p></p>
</body>
</html>
CSS:
body {
background-image: url(halftone.png);
background-repeat: repeat-y;
width: 1000px;
height: 4000px;
}
h1 { font-family: 'Lobster', cursive;
color: black;
position: absolute;
top: 25px;
left: 540px;
text-decoration: underline;
}
h2 {font-family: 'lobster', cursive;
color: black;
position: absolute;
top: 540px;
left: 480px;
text-decoration: underline;
}
p { font-family: 'Lobster', cursive;
font-size: 20px;
color: white;
position: absolute;
top: 300px;
left: 320px;
display: 0px auto;
}
#runescape {
position: absolute;
top: 500px;
}
#pagesize {
max-height: 10000px;
}
#ben {
position: absolute;
top: 130px;
left: 290px;
width: 700px;
height: 400px;
}
.grow {
position: absolute;
left: 550px;
top: 700px;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
#cameron {
position: absolute;
top: 285px;
left: 220px;
}
#pastcoding {
position: absolute;
top: 100px;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
Try background-size:cover; to your body
Yeah background-size:cover; is a enough option. But may be it doesn't view your image completely as expected. Best option to accomplish your task is that the image should re-size proportional to your body size and use background-size: (width)px (height)px; in your body styling. But this is only applicable to fixed size body. Unless it won't be pretty. :-)
Try background-repeat: repeat; and min-height: 1080px; to body in css and change 1080px to as required to you.