Question

我正在创建一个包含三个标签的网站，我希望标签在背景图像上显示为灰色框，大小不透明度为25％。我的问题是我不知道怎么做这个＆amp;我的背景图片根本不会显示。我对编程很新，所以它可能只是我的一个愚蠢的错误，任何帮助都表示赞赏！

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');
    
    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
    
    // Change/remove current tab to active
    
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    
    e.preventDefault();
  });
});

body{
  background-image: url("Artwork/Login.jpg");
}

/*TABS INFO*/
.tabs {
  width:100%;
  display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
  display:block;
  clear:both;
  content:'';
}

.tab-links li {
  margin:0px 5px;
  float:left;
  list-style:none;
}

.tab-links a {
  padding:9px 15px;
  display:inline-block;
  border-radius:0px 0px 5px 5px;
  background:#7FB5DA;
  font-size:16px;
  font-weight:600;
  color:#4c4c4c;
  transition:all linear 0.15s;
}

.tab-links a:hover {
  background:#a7cce5;
  text-decoration:none;
}

li.active a, li.active a:hover {
  background:#fff;
  color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
  padding:15px;
  border-radius:3px;
  box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
  background:#fff;
  background-color: rgba(255, 255, 255, .25);
}

.tab {
  display:none;
}

.tab.active {
  display:block;
}

<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
  <body>
    <div class="tabs">
      <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
      </ul>
      <div class="tab-content">
        <div id="tab1" class="tab active">
          this is a test
        </div>

        <div id="tab2" class="tab">
          this is a test
        </div>

        <div id="tab3" class="tab">
          this is a test
        </div>
      </div>
    </div>
</body>
<footer>
</footer>

我尝试过更改文件结构，重命名以及其他任何我能想到的内容，但就像我说的那样;我是新人，所以我有点在黑暗中磕磕绊绊。

Answer 1

我非常确定这里不需要起始/（如果图片位于HTML页面旁边的Artwork文件夹中）：

background: url("/Artwork/Login.jpg");

你对不透明度有什么看法？代码中没有opacity属性。

编辑：

根据您的评论，这里有一种白色透明背景，内有不透明的黑色文字：

＆＃13;

body {
  background-image: url("http://static3.depositphotos.com/1004423/181/i/950/depositphotos_1812868-Abstract-Rock-Background.jpg");
  background-size: cover;
}

.trans {
  background-color: rgba(255, 255, 255, .5);
  color: black;
  font-family: Arial;
  padding: .5em;
}

＆＃13;

<div class="trans">here you go</div>

＆＃13;

背景不会显示和选项卡不透明

1 个答案: