CSS / HTML Container Help please.

HoldUp

dont even
Aug 31, 2017
242
32
Hi so I'm working on a page, will probs have no purpose but I'm bored and want to work on something..
So, I've made a box container using CSS and using html..
This is what I've got so far:
You must be registered for see images attach

How do I make it so only the border of the box and the box itself has a reduced opacity?
When I type, add images etc it's making all of that have the same opacity..
 

HoldUp

dont even
Aug 31, 2017
242
32
CSS:
Code:
body {
    background-color: #bce0ee;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0px;
}

#box-container {
 background-color: #000000;
    border: 1px solid #96b3be;
    width: 760px;
    height: 400px;
    margin: 25px auto;
    border: 3px solid #B22727;
    opacity: 0.5;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    margin-top: 100px;
    overflow: auto;
    
}
HTML:
Code:
<?php include_once('checktheban.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>{hotelName} &middot; Maintenance</title>
 <link rel="stylesheet" href="{url}/app/tpl/skins/Habbo/styles/maint.css" type="text/css">
 </head>
 
 <body>

 <div id="box-container">
<p><font color="white"> Test </p></font></div>
 </div></center>
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
You need to use RGBA on the box, not opacity.

So first off you need to convert #96b3be to RGB which is rgb(150,179,190) then apply an alpha transparency value to it

So it would be
Code:
#box-container {
    background-color: rgba(150,179,190,.5);
    /*rest of styles*/
}

You set the .5 to whatever opacity value you want, but as you’ve set opacity: 0.5 in your original code, I’m assuming you want a half-opaque opacity.

You can try the same thing on the border, I’m not sure if alpha transparency would work on borders as I’ve never tried, but I can’t see why it wouldn’t work.
 

HoldUp

dont even
Aug 31, 2017
242
32
You need to use RGBA on the box, not opacity.

So first off you need to convert #96b3be to RGB which is rgb(150,179,190) then apply an alpha transparency value to it

So it would be
Code:
#box-container {
    background-color: rgba(150,179,190,.5);
    /*rest of styles*/
}

You set the .5 to whatever opacity value you want, but as you’ve set opacity: 0.5 in your original code, I’m assuming you want a half-opaque opacity.

You can try the same thing on the border, I’m not sure if alpha transparency would work on borders as I’ve never tried, but I can’t see why it wouldn’t work.
Oh okay thanks for this. Wasn't entirely sure aha
 

Users who are viewing this thread

Top