Question

所以我正在研究一个供我个人使用的项目（这是一种为我学习的方式）

我试图在我的网站上添加一个带有白色边框透明的按钮，我正在浏览stackoverflow，我偶然发现了这个。 JsFiddle

我尝试将它添加到我的CSS中，但它没有顺利，它没有显示在网页上。

我从这个项目中休息了大约一个月，所以可能会有一些我忘了做但我不知道的事情。

（按钮位于CSS的底部）

CSS

html,
      body,
      img {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background: url(.container);
      }

      body {
        font-family: "Helvetica Neue", Helvetica, Arial;
      }

      .container {
        height: 100%;
        width: 100%;
        overflow: hidden;
        z-index: 900;
      }

      .cycle-slideshow {
        height: 100%;
        width: 100%;
        display: block;
        position: relative;
        margin: 0 auto;
      }

      .cycle-prev,
      .cycle-next {
        font-size: 200;
        color: #FFF;
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -16px;
        z-index: 9999;
        cursor: pointer;
      }

      .cycle-prev {
        left: 10%;
      }

      .cycle-next {
        right: 10%;
      }

      .cycle-pager {
        width: 100%;
        text-align: center;
        display: block;
        position: absolute;
        position: top;
        bottom: 20px;
        z-index: 9999;
      }

      .cycle-pager span {
        text-indent: 100%;
        white-space: nowrap;
        ;
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid #FFF;
        border-radius: 50%;
        margin: 0 10px;
        cursor: pointer;
      }

      .cycle-pager .cycle-pager-active {
        background: #FFF;
      }
      /*Menu CSS*/

      #sidebar {
        background: #151718;
        width: 200px;
        height: 17%;
        display: block;
        position: absolute;
        left: -200px;
        top: 0px;
        transition: left 0.3s linear;
        z-index: 1000;
      }

      #sidebar.visible {
        left: 0px;
        transition: left 0.3s linear;
      }

      ul {
        margin: 0;
        padding: 0;
      }

      ul li {
        list-style: none;
      }

      ul li a {
        background: #1C1E1F;
        color: #ccc;
        border-bottom: 1px solid #111;
        display: block;
        width: 180px;
        padding: 10px;
        text-decoration: none;
      }

      #sidebar-btn {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 150px;
        cursor: pointer;
        margin: 20px;
        position: absolute;
        top: 0px;
        right: -60px;
      }

      #sidebar-btn span {
        height: 1px;
        background: #ffffff;
        margin-bottom: 5px;
        display: block;
      }

      #sidebar-btn span:nth-child(2) {
        width: 75%;
      }

      #sidebar-btn span:nth-child(3) {
        width: 50%;
      }

      button {
        background-color: Transparent;
        background-repeat: no-repeat;
        cursor: pointer;
        overflow: hidden;
        outline: none;
        height: 38px;
        line-height: 40px;
        border: 2px solid white;
        display: inline-block;
        float: none;
        text-align: center;
        width: 120px;
        padding: 0px!important;
        font-size: 14px;
        color: #fff;
      }

      button:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
      }
      /*Menu CSS*/

HTML

<!DOCTYPE html>

<!-- Developer: Varga Developments -->
<!-- Project: Fully Responsive Website With A Background Image Slider. -->

<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Full Width Responsive Image Slider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>
  </head>

  <body>
    <div id="sidebar">

      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="servicesPage.html">Services</a></li>
        <li><a href="aboutPage.html">About</a></li>
        <li><a href="aboutPage.html">Contact</a></li>
      </ul>


      <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
      </div>

    </div>

    <!-- Full Width Responsive Slider -->

    <div class="container">

      <div class="cycle-slideshow">
        <span class="cycle-prev">〈</span>
        <span class="cycle-next">〉</span>
        <span class="cycle-pager"></span>
        <img src="images/wp5.jpg">
        <img src="images/wp6.jpg">
        <img src="images/wp7.jpg">
      </div>
      <!-- Full Width Responsive Slider -->

    </div>

  </body>

</html>

JS

  $(document).ready(function() {

    $('#sidebar-btn').click(function() {
      $('#sidebar').toggleClass('visible');

    });
  });

Answer 1

答案很简单。我不得不添加HTML代码来连接CSS部分，因此缺少的代码是

array([[ 0.,  0.,  1.,  0.,  0.,  0.,  0.,  0.,  0.,  0.],
   [ 0.,  0.,  0.,  1.,  0.,  0.,  0.,  0.,  0.,  0.],
   [ 0.,  0.,  1.,  0.,  0.,  0.,  0.,  0.,  0.,  0.],
   [ 0.,  0.,  0.,  0.,  0.,  1.,  0.,  0.,  0.,  0.],
   [ 0.,  0.,  0.,  0.,  0.,  0.,  1.,  0.,  0.,  0.]])

我在代码

中添加了HTML部分

Answer 2

我希望这会有所帮助，不过一点点。我创建了一个关于透明按钮的简单示例。我已将按钮放在具有背景图像的div元素内。

HTML

<div>
   <button>Transparent Button</button>
</div>

CSS

body {margin: 0;}
    div {
        width: 100vw;
        height: 100vh;
        background-image: url(path/to/image/imagefile.jpg);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    button {
        background: rgba(0,0,0,0.3);
        padding: 10px 20px;
        border: 2px solid white;
        font: 16px Arial;
        line-height: 2;
        color: white;
        cursor: pointer;
    }
    button:hover {
        background: rgba(0,0,0,0.5);
    }

您可以将按钮的背景图像更改为transparent以使其完全透明，但我选择使用rgba来获得一些颜色。 rgba中的第四个参数是按钮背景的不透明度。

使用CSS创建带边框的按钮

2 个答案: