英文:
Border opacity in css using rgba() not working
问题
我正在使用HTML和CSS(尚无JavaScript)创建一个简单的登录网站模板,但出现了一个问题:当我在CSS的.main
类中使用border-color
属性并使用rgba()
函数时,如下所示:
border-color: rgba(255, 255, 255, 0.5);
RGB颜色有效,但不起作用的是Alpha通道。
我尝试了以下方式,并删除了原始行:
border: 60px solid rgba(255, 255, 255, 0.5);
我正在使用Chrome版本108。
英文:
I am working on a simple login site template using html and css (no js yet) and for some reason when I use the border-color property in my css for the .main class and i use the rgba() function like this:
border-color: rgba(255, 255, 255, 0.5);
the rgb works but the alpha does not at all.
I tried doing this instead and i also removed the original line:
border: 60px solid rgba(255, 255, 255, 0.5);
I am using chrome version 108.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html {
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
background-image: linear-gradient(red, lime);
}
.main {
margin: 60px;
border: 60px solid;
border-color: rgba(255, 255, 255, 0.5) !important;
/* Set border opacity */
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.8);
}
.main input {
border-radius: 10px;
height: 30px;
background-color: lightgray;
}
.main input:focus {
background-color: white;
}
.main button {
height: 30px;
border-radius: 15px;
}
<!-- language: lang-html -->
<center>
<div class="main">
<h1>Login</h1>
<p>Hello! To continue please log into our service:</p>
<h2>Email</h2>
<input type="email">
<h2>Password</h2>
<input type="password">
<br>
<br>
<button type="button" onclick='alert("logging in...")'>Login</button>
</div>
</center>
<!-- end snippet -->
答案1
得分: 4
你需要将 background-clip: padding-box;
添加到限制背景仅在填充区域显示,而不在边框颜色下显示的样式中。
background-clip: padding-box;
英文:
You need to add background-clip: padding-box;
to limit the background to padding area and not have it under your border-color:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html {
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
background-image: linear-gradient(red, lime);
}
.main {
margin: 60px;
border: 60px solid;
border-color: rgba(255, 255, 255, 0.5);
/* Set border opacity */
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.8);
background-clip: padding-box
}
.main input {
border-radius: 10px;
height: 30px;
background-color: lightgray;
}
.main input:focus {
background-color: white;
}
.main button {
height: 30px;
border-radius: 15px;
}
<!-- language: lang-html -->
<div class="main">
<h1>Login</h1>
<p>Hello! To continue please log into our service:</p>
<h2>Email</h2>
<input type="email">
<h2>Password</h2>
<input type="password">
<br>
<br>
<button type="button" onclick='alert("logging in...")'>Login</button>
</div>
<!-- end snippet -->
答案2
得分: 0
border-color: rgba(255, 255, 255, 0.5)
background-color: rgba(255, 255, 255, 0.8)
建议你在.main背景和边框之间创建良好的对比。
在前端,你还需要学习设计方面的知识。所以,我建议你学习如何管理颜色的一个视频是:https://youtu.be/Qj1FK8n7WgY?list=PLAiIx7LPQuH3FN2B2oBNiWhPCBC2NdqDe
我相信背景和边框之间有更好的对比,并且不透明度低于50%将解决你的问题。
英文:
I took a look and there's no issue.
You created two styles very similar and with 50% or more of opacity:
border-color: rgba(255, 255, 255, 0.5)
background-color: rgba(255, 255, 255, 0.8)
I suggest you to create a good contrast between the .main background and border.
In front-end, you will need to learn about design too. So, one of the videos I suggest you to learn how to manage colors is: https://youtu.be/Qj1FK8n7WgY?list=PLAiIx7LPQuH3FN2B2oBNiWhPCBC2NdqDe
I believe that a better contrast between the background and border, and an opacity below 50% will solve your problem.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论