All geek questions in one place

How to achieve this without using a photo editor?

Can i change:

enter image description here

in:

enter image description here

without using photo editor

  • Here is the CSS and HTML

  • I could not upload the logo because I must have at least 10 reputations in order to post more than two links, so I can insert it in another comment

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>
+5
source share
2 answers

You can use opacity to create a translucent image, and it can be nice with it by adjusting it to whatever you need.

But if you want to change the color of the image darker, you can use CSS filters. You can make it darker / dark brown / brown by adjusting the hue. It is worth noting browser support - https://caniuse.com/#feat=css-filters

 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; } 
 <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>
+3
source

Looks like one time - i.e. it's a logo and that's it. This is much easier to do using Photoshop .

I voted Michael replied , because I believe that as close to CSS as possible. If there is no “hacker” way to do this.

My method:

Use Photoshop.

Then add a photo as the background image of one of the pseudo-elements for your div / img header

I created a sample below the expected end result.

I encoded the overlay image as Base64 , since it is only 1kb in size. It should be checked with your CSS file. More on Base64

You can control the opacity pseudo-element.

 .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==') } / png; base64, iVBORw0KGgoAAAANSUhEUgAAA3AAAAExCAMAAAAKr7AFAAAABGdBTUEAALGPC / xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAP /// v /// v /// yYLV3kAAAADdFJOUwB6xLOvUwsAAAN0SURBVHja7d3BroMgEEBRBv7 / n7vsRqGMSGo8Zzs7zY0vhOkrDdimeAQgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAeCAwQHggMEB4IDwQGCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHggMEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCC4J6pxYjiM3hDBcSTKsRgOT2aleqiCQ3CCQ3AITnCCExx3vadOUzU1FJzgmA6u9poafv0QHFPBNcEJDsEhOMEJTnD8JDJNCU5wrP3AxbUhgmP2L8oLQwSH4ASH4BDca9T0IWUVnOCY1T2HLOkhgmMmuPHtZDcpBYfgBIfgEByCExyb5RfeQnCCY1lww6GblIJDcIJDcAgOwQmO3fLbcJZzBMf8S0of / DukFBzLgrs4RHAITnAIDsG9Rk2fmYTgBMcs23CC4w + Cy19d9kwFh + AEh + AQnOAEJzhukl94c0gpONYFN / z6ubosOAQnOASH4BCc4Nj + itILb7bhBMey4IZD / 1dAcAhOcAgOwSE4wbHb + l8Q8s4Fx / QHzjac4NgYXP4nuzxTwSE4wSE4BCc4wQmOm + S24VqzDSc4VgbXa8rVZcEhOAQnOATHVwhOcGx8QdltuGobTnAsC244dHVZcAhOcAgOwSE4wfGIMxPLOYIDBAeCA8EBggPBAYIDw .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==') } 
 <div class="content"></div>
0
source

Source: https://habr.com/ru/post/1269694/

More articles:


All Articles