Question

我可以改变：

进入：

不使用照片编辑器

这是CSS和HTML代码
我无法上传徽标，因为我应该至少有10个声望才能发布超过2个链接，所以我可能会将其插入另一个评论中

header {
  background-color: rgba(255, 255, 255, 0.9);
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 2;
}

header .logo {
  position: fixed;
  left: 50%;
  top: 13px;
  display: inline-block;
}

.background-image {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #fff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg') no-repeat center center;
  background-size: 100%;
}

<body>
  <header>
    <div class="header-section logo">
      <a href="/">
        <img src="http://i.imgur.com/IB1gfZB.png" alt="...">
      </a>
    </div>
  </header>
  <div class="background-image"></div>
</body>

Answer 1

您可以使用opacity创建一个半透明的图像，通过将其调整为您需要的任何内容，您可以使用它。

但是，如果您还想将图像的颜色更改为更暗，则可以使用CSS过滤器。您可以通过调整色调使其变暗/栗色/褐色。值得注意的是浏览器支持 - https://caniuse.com/#feat=css-filters

＆＃13;

header {
  background-color: rgba(255, 255, 255, 0.9);
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 2;
}

header .logo {
  position: fixed;
  left: 50%;
  top: 13px;
  max-width: 100%;
opacity: .7;
position: absolute;
top: 0; left: 0;
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg);
}

.background-image {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #fff url(http://environment.umn.edu/wp-content/uploads/2016/04/global_landscapes_initiative_directory_pages.jpg) no-repeat center center;
}

＆＃13;

<body>
  <header>
    <div class="header-section logo">
      <a href="/">
        <img src="http://i.imgur.com/IB1gfZB.png" alt="...">
      </a>
    </div>
  </header>
  <div class="background-image"></div>
</body>

＆＃13;

Answer 2

看起来像一次性的东西 - 即它是一个徽标和所有 - 用 Photoshop 来做这样的事情要容易得多。

我投了Michael's answer，因为我认为只有单独使用CSS 才能获得尽可能接近的结果。除非有一些＆＃34; hacky＆＃34;这样做的方法。

我的方法：

使用Photoshop。

然后将照片添加为标题FROM tsl.devops.dotnetcore.base.image MAINTAINER Brian Ogden ############################################# # .NET Service setup ############################################# ARG ASPNETCORE_ENVIRONMENT WORKDIR /app COPY ./src/TSL.Bom.Service/bin/Debug/netcoreapp1.1/publish . ENV ASPNETCORE_URLS http://+:5001 ENV ASPNETCORE_ENVIRONMENT $ASPNETCORE_ENVIRONMENT EXPOSE 5001 ENTRYPOINT ["dotnet", "TSL.Bom.Service.dll"] ############################################# / div

的其中一个伪元素的背景图片

我在预期的最终结果下创建了一个示例。

我将叠加图像编码为img，因为它的大小只有Base64。应该用你的CSS文件检查它。详细了解Base64

您可以控制伪元素的1kb。

＆＃13;

opacity

＆＃13;

.content {
  width: 100%;
  max-width: 100%;
  height: 500px;
  position: relative;
  background: url(https://unsplash.it/800/310) no-repeat
}

.content::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: .25;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAExCAMAAAAKr7AFAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAP///v///v///yYLV3kAAAADdFJOUwB6xLOvUwsAAAN0SURBVHja7d3BroMgEEBRBv7/n7vsRqGMSGo8Zzs7zY0vhOkrDdimeAQgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAeCAwQHggMEB4IDwQGCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHggMEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCC4J6pxYjiM3hDBcSTKsRgOT2aleqiCQ3CCQ3AITnCCExx3vadOUzU1FJzgmA6u9poafv0QHFPBNcEJDsEhOMEJTnD8JDJNCU5wrP3AxbUhgmP2L8oLQwSH4ASH4BDca9T0IWUVnOCY1T2HLOkhgmMmuPHtZDcpBYfgBIfgEByCExyb5RfeQnCCY1lww6GblIJDcIJDcAgOwQmO3fLbcJZzBMf8S0of/DukFBzLgrs4RHAITnAIDsG9Rk2fmYTgBMcs23CC4w+Cy19d9kwFh+AEh+AQnOAEJzhukl94c0gpONYFN/z6ubosOAQnOASH4BCc4Nj+itILb7bhBMey4IZD/1dAcAhOcAgOwSE4wbHb+l8Q8s4Fx/QHzjac4NgYXP4nuzxTwSE4wSE4BCc4wQmOm+S24VqzDSc4VgbXa8rVZcEhOAQnOATHVwhOcGx8QdltuGobTnAsC244dHVZcAhOcAgOwSE4wfGIMxPLOYIDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4QHAgOBAcIDgQHCA4EBwIDhAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDwXkEIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHggMEB4IDBAeCA8EBggPBAYIDwQGCA8GB4ADBgeAAwYHgQHCA4EBwgOBAcIDgQHAgOEBwIDjgwAeC1hN7ntJexAAAAABJRU5ErkJggg==')
}

＆＃13;

如何在不使用照片编辑器的情况下实现此目的

2 个答案: