Question

我把头发拉过来。我已经尝试了所有我发现的东西，在这一点上，我猜我一定是犯了某种错误。我试图使背景图像变暗，使其不再饱和。

这是我的HTML：

public ActionResult Create()
{
  NewThreatVM model = new NewThreatVM model();
  ConfigureViewModel(model);
  return View(model);
}

[HttpPost]
public ActionResult Create(NewThreatVM model)
{
  if (!ModelState.IsValid)
  {
    ConfigureViewModel(model);
    return View(model);
  }
  // Initialize new data model and map properties from view model
  Threat threat = new Threat() { Description = model.Description };
  // Save it (which will set its ID property)
  _context.Threats.Add(Threat);
  _context.SaveChanges();
  // Save each selected security event
  foreach (int selectedEvent in model.SelectedSecurityEvents)
  {
    ThreatHasSecurityEvent securityEvent = new ThreatHasSecurityEvent()
    {
      ThreatID = threat.ID,
      SecurityEventID = selectedEvent
    };
    _context.ThreatHasSecurityEvents.Add(securityEvent);
  }
  _context.SaveChanges();
  return RedirectToAction("GetThreat", new { ThreatID = threat.ID });
}

private void ConfigureViewModel(NewThreatVM model)
{
  var securityEvents = _context.SecurityEvents;
  model.SecurityEventList = new SelectList(securityEvents, "ID", "Description");
}

我的CSS：

<body id="home">
    <header>
        <nav>
            <ul class="pull-left">
                <li><a href="#">Bearbeard Logo</a></li>
                <li><a href="#">World</a></li>
            </ul>
            <ul class="pull-right">
                <li><a href="#">Eretikas</a></li>
                <li><a href="#">Custom</a></li>
            </ul>
            <div id="slogan">THE HERETIC SWORD</div>
        </nav>
    </header>
</body>

这给了我一个完全覆盖页面的背景。但是我想让它变暗（没有悬停或点击）。我尝试过的所有东西都没有任何变暗（我尝试过伪造的渐变，#home { background-image: url(file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } nav li { display: inline; position: relative; float: left; } nav a { color: #5a5a5a; font-size: 11px; font-weight: bold; padding: 14px 10px; text-transform: uppercase; } #slogan { color: #FFFAF0; font-family: 'Raleway', sans-serif; font-weight: bold; font-size: 18px; opacity: 0.5; text-align: center; font-weight: bold; }等等），并以某种方式妨碍了reba和<div id="slogan">把它们推到一边。

我的格式是完全错误的吗？

Answer 1

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

This should work

Answer 2

您可以在body标记上设置背景，并使用rgba() + alpha添加包含伪内容的变暗图层，然后将所有内容包装到div和将其设置为position:relative，使其保持最佳状态。

html, body {
    height: 100%;
    margin: 0;
}
body {
    background: url("http://lorempixel.com/400/200") center center no-repeat;
    background-size: cover;
    position: relative;
}
body:before {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    transition: background .5s;
}
body:hover:before {
    /*for demo, move this line up if you want to darken it as default*/
    background: rgba(0,0,0, .5);
}
div {
    position: relative;
    color: white;
}

<div>Hello world!</div>

Answer 3

.tile:hover{
    background-color: rgb(211, 211, 211);
    background-blend-mode: multiply;
}

这对我来说只能在div上调整背景图像。

可以调整背景颜色以使图像或多或少变亮。

Answer 4

创建一个适合100％#home的容器div：

#container {
background: rgba(0, 0, 0, 0.5);
}

0.5 = 50％不透明度......

它会使背景图像变暗

Answer 5

第一项业务：你不需要身体元素上的id或类

，然后再看下面的代码。

＆＃13;

body {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url(http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg);
}

nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

nav li {
  display: inline;
  position: relative;
  float: left;
}

#slogan {
  color: #FFFAF0;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 18px;
  opacity: 0.5;
  text-align: center;
  font-weight: bold;
}

＆＃13;

<body>
    <nav>
        <ul class="pull-left">
            <li><a href="#">Bearbeard Logo</a></li>
            <li><a href="#">World</a></li>
        </ul>

        <ul class="pull-right">
            <li><a href="#">Eretikas</a><li>
            <li><a href="#">Custom</a><li>
        </ul>

        <div id="slogan">THE HERETIC SWORD</div>
     </nav>
   </body>

＆＃13;

原始图片感谢谷歌：）

Answer 6

您可以添加相对于#home的位置，然后将以下内容添加至CSS：

#home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

（0.5可能会有所变化，具体取决于您想要成像的黑暗程度。）

然后执行z-index将其他内容置于叠加层上方：

#home * {
  z-index: 10; 
}

Answer 7

您可以使用background-blend-mode属性并将其设置为变暗。看起来像这样

background-blend-mode:darken;

希望这会有所帮助。

Answer 8

你可以这样做：

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

如何使CSS背景图像变暗？

8 个答案: