تنظیم اوپاسیتی
سلام دوستان
من یه فرم دارم که میخوام اوپاسیتی بکگراندشو کم کنم
ولی وقتی میکنم اینپوت ها و بقیه چیزاشم کم میشه
چکار کنم فقط بکگراند و اوت لاین اوپاسیتیش کم بشه؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login</title>
<style>
body
{
margin: 40px;
font-family: Arial,Helvetica,sans-serif;
background-image: url(https://i.pinimg.com/originals/f4/31/91/f43191b2036194213fa5777dbea47b06.jpg);
background-size: 100%
}
img
{
width: 100px;
display: block;
margin-right: auto;
margin-left: auto
}
form
{
text-align: left;
outline: 3px solid #bdc3c7;
background-color: #ecf0f1;
padding: 20px
}
input
{
display: block;
width: 93%;
height: 40px;
padding-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left:auto;
margin-right: auto;
border-radius: 3px;
}
button
{
display: block;
width: 100%;
height: 40px;
background-color: #3498db;
color: white;
border: 0px;
margin-bottom: 10px;
border-radius: 3px
}
.clearfix
{
overflow: auto;
}
.rme
{
display: inline;
}
button:hover
{
opacity: 0.8;
}
a:hover
{
text-decoration:none
}
a:active
{
text-decoration:none
}
</style>
</head>
<body>
<h2 style="color: white">Login form</h2>
<form action="" method="get">
<img src="https://png.pngtree.com/svg/20161229/_username_login_1172579.png" alt="">
<label for="uname"><b>Username</b></label>
<input type="text" name="" id="uname" placeholder="Enter your username" class="clearfix" required autofocus autocomplete="on"> <br>
<label for="pass"><b>Password</b></label>
<input type="password" name="" id="pass" placeholder="Enter your password" class="clearfix" required autocomplete="on">
<button type="submit">Login</button> <hr>
<button type="button" id="cancel">Cancel</button>
<a href="#" id="fpass">forgot password?</a>
</form>
</body>
</html>```سلام
opacity معمولا برای عکس استفاده میشه اگر میخواین background شفاف بشه از rgba استفاده کنید نمونه کدش
form
{
text-align: left;
outline: 3px solid #bdc3c7;
background-color: rgba(0, 0, 0, .5);
padding: 20px
}کدتون رو که من بررسی کردم، شما اصلا تغییری رو توی میزان تاری (opacity) اعمال نکردید که.
مشکلی دیده نمیشه.
اینجوری هم می تونید به پس زمینه میزان تاری (شدت رنگ) بدید (به دو رقم آخر خصوصیت رنگ پس زمینه که اضافه کردم دقت کنید). بقیه عناصر هم مشکلی ندارند و مثل سابق هستند.
form
{
text-align: left;
outline: 3px solid #bdc3c7;
background-color: #ecf0f155;
padding: 20px
}خواهش می کنم.
نه اینطوری که میگید نیستش، اعداد مختلف شدت متفاوتی رو رقم می زنند.
این عدد دو رقمی در مبنای 16 هستش که 256 حالت مختلف رو ایجاد می کنه.
از 0 تا 9 و در ادامه a, b, ... , d, f رو می تونید وارد کنید برای هر رقم.
مثلا اگه دو رقم آخر رو ff بزارید هیچ تغییر نمی کنه.
cc بزارید کمی محو میشه.
99 بزارید کمی بیشتر.
55 بزارید بیشتر
و اگر 00 بزارید کامل رنگ پس زمینه محو میشه.
البته شما می تونید از همون روشی که @mahdifalahati75 ذکر کردند هم استفاده کنید و با rgba رنگ و شدت رنگ رو تنظیم کنید. هر دو روش میشه.