Question

Website

我想添加一个不透明按钮，以便我可以看到背景图像，仍然可以点击按钮，就像上图中的登录按钮一样。我该怎么做呢？

这是我的HTML：

<html>
    <head>
        <title>Subjects</title>
        <style>
            body{
                background-color:black;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            .title {
                height: 62px;
                width: 231px;
                background-color:#446CB3;
                border-bottom-left-radius: 25px;
                margin-top: 81px;
                margin-left: 28px;
            }
        </style>
    </head>
    <body>

        <div class="title">

        </div>
    </body>
</html>

Answer 1

你的意思是......一个透明的链接？

＆＃13;

body {
  background: #ccc url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: white;
  border: 2px solid white;
  padding: 2rem;
  font-size: 3rem;
}

＆＃13;

<a href="#" onclick="alert('It\'s working!')">Transparent link</a>

＆＃13;

还是一个看不见的链接？

＆＃13;

body {
  background: #ccc url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  padding: 2rem;
  font-size: 3rem;
  opacity: 0;
}

＆＃13;

<a href="#" onclick="alert('It\'s working!')">Invisible link</a>

＆＃13;

Answer 2

一种非常简单的方法是在按钮的背景中使用rgba颜色：

background-color:rgba(255, 255, 255, 0.2);

示例：

<html>
    <head>
        <title>Subjects</title>
        <style>
            body{
                background-color:black;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            .title {
                height: 20px;
                width: 231px;
                background-color:rgba(255, 255, 255, 0.2);
                border: solid 2px #fff;
                border-radius: 4px;
                margin-top: 81px;
                margin-left: 28px;
                color: #fff;
                text-align:center;
                padding:16px;
            }
        </style>
    </head>
    <body>
    
        <div class="title">
            Sign up!
        </div>
    </body>
</html>

Answer 3

将按钮元素设置为不透明度属性

https://www.w3schools.com/csS/css_image_transparency.asp

如何在html中添加背景图像上的不透明按钮？

3 个答案: