تنظیم اوپاسیتی
سلام دوستان
من یه فرم دارم که میخوام اوپاسیتی بکگراندشو کم کنم
ولی وقتی میکنم اینپوت ها و بقیه چیزاشم کم میشه
چکار کنم فقط بکگراند و اوت لاین اوپاسیتیش کم بشه؟
پاسخ‌ها
9
سلام وقتتون بخیر
لطفا کدهای html و css تون رو قرار بدین.
<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
}@milad
میشه یکم بیشتر توضیح بدین؟
من هر عدد دورقمی ک وارد میکنم به یه اندازه محو میشه
خواهش می کنم.
نه اینطوری که میگید نیستش، اعداد مختلف شدت متفاوتی رو رقم می زنند.
این عدد دو رقمی در مبنای 16 هستش که 256 حالت مختلف رو ایجاد می کنه.
از 0 تا 9 و در ادامه a, b, ... , d, f رو می تونید وارد کنید برای هر رقم.
مثلا اگه دو رقم آخر رو ff بزارید هیچ تغییر نمی کنه.
cc بزارید کمی محو میشه.
99 بزارید کمی بیشتر.
55 بزارید بیشتر
و اگر 00 بزارید کامل رنگ پس زمینه محو میشه.
البته شما می تونید از همون روشی که @mahdifalahati75 ذکر کردند هم استفاده کنید و با rgba رنگ و شدت رنگ رو تنظیم کنید. هر دو روش میشه.
@milad @mahdifalahati75
خیلی ممنونم از راهنماییتون لطف کردین