Opacity - Printable Version

Opacity - Printable Version

+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Web Design (https://sinister.ly/Forum-Web-Design)
+--- Thread: Opacity (/Thread-Opacity)

Opacity - BlueCat - 08-29-2014

This is the problem. [Image: 2e350f64c84ced778fe9dc904aa24ef2.png]

How can I get the input field to show fully without it being transparent?

RE: Opacity - Anima Templi - 08-29-2014

You really have to show us the code behind it, otherwise it will be very hard to help you.

RE: Opacity - BlueCat - 08-29-2014

(08-29-2014, 09:48 PM)Anima Templi Wrote: You really have to show us the code behind it, otherwise it will be very hard to help you.

The input box.

Code:
input[type="text"] {
	margin-left: 820px;
	height: 40px;
	width: 260px;
	margin-top: -500px;
	position: absolute;
	border-radius: 5px;
}

Then the transparent background.

Code:
#hello {
	background-color: black;
	height: 300px;
	position: absolute;
	width: 300px;
	opacity: 0.7;
	margin-top: -600px;
	margin-left: 800px;
}

Then of course the form itself....

Code:
<form method="post" action="index.php">
<input type="text" name="username" placeholder="Username, Email, Phone Number" />
<input type="password" name="password" placeholder="password" />
<input type="submit" name="submit" value="Login" />
</form>

RE: Opacity - BlueCat - 08-29-2014

(08-29-2014, 09:48 PM)Anima Templi Wrote: You really have to show us the code behind it, otherwise it will be very hard to help you.

The input box.

Code:
input[type="text"] {
	margin-left: 820px;
	height: 40px;
	width: 260px;
	margin-top: -500px;
	position: absolute;
	border-radius: 5px;
}

Then the transparent background.

Code:
#hello {
	background-color: black;
	height: 300px;
	position: absolute;
	width: 300px;
	opacity: 0.7;
	margin-top: -600px;
	margin-left: 800px;
}

Then of course the form itself....

Code:
<form method="post" action="index.php">
<input type="text" name="username" placeholder="Username, Email, Phone Number" />
<input type="password" name="password" placeholder="password" />
<input type="submit" name="submit" value="Login" />
</form>

RE: Opacity - bluedog.tar.gz - 08-29-2014

Is your input in #hello?

try #hello input { opacity:1; }

RE: Opacity - Rye123_mybb_import20042 - 08-31-2014

Is the background in front of or behind the input field? This could be another problem.

RE: Opacity - BlueCat - 08-31-2014

(08-31-2014, 12:48 AM)Rye123 Wrote: Is the background in front of or behind the input field? This could be another problem.

I fixed it earlier on.

The solution was making the background solid then placing the inputs on the background, then finally applying the transparent background.