CSS中使用rgba()的边框不透明度不起作用。

huangapple go评论53阅读模式
英文:

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 -->

&lt;center&gt;
  &lt;div class=&quot;main&quot;&gt;
    &lt;h1&gt;Login&lt;/h1&gt;
    &lt;p&gt;Hello! To continue please log into our service:&lt;/p&gt;
    &lt;h2&gt;Email&lt;/h2&gt;
    &lt;input type=&quot;email&quot;&gt;
    &lt;h2&gt;Password&lt;/h2&gt;
    &lt;input type=&quot;password&quot;&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&#39;alert(&quot;logging in...&quot;)&#39;&gt;Login&lt;/button&gt;
  &lt;/div&gt;
&lt;/center&gt;

<!-- 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 -->

&lt;div class=&quot;main&quot;&gt;
    &lt;h1&gt;Login&lt;/h1&gt;
    &lt;p&gt;Hello! To continue please log into our service:&lt;/p&gt;
    &lt;h2&gt;Email&lt;/h2&gt;
    &lt;input type=&quot;email&quot;&gt;
    &lt;h2&gt;Password&lt;/h2&gt;
    &lt;input type=&quot;password&quot;&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&#39;alert(&quot;logging in...&quot;)&#39;&gt;Login&lt;/button&gt;
  &lt;/div&gt;

<!-- 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.

huangapple
  • 本文由 发表于 2023年2月19日 06:47:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/75496853.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定