div:nth-child(1) { background-color: #190059; width: 150px; height: 150px; position: relative; } div:nth-child(1) div:nth-child(1){ background-color: #ffffff; width: 100px; height: 100px; position: absolute; top: 10px; left: 10px; opacity: 0.7; } div:nth-child(1) div:nth-child(1) p { color: #ffffff; } 
 <div> <div> <p>Текст</p> </div> </div>

    2 answers 2

    Just give a shadow: text-shadow

     body { font-size: 2em; color: #fff; text-shadow: 0 0 1px #000; font-weight: 900; font-family: Helvetica; } 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, nobis, nostrum! Odio sint facilis libero magni soluta maiores illum dicta!

    off topic, but there are buns that are supported in 80% of browsers

     *{ margin:0; padding:0; max-width:100%; } .hero { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/459370/Wallace_Home_01%20Copy%2025.jpg); height: 100vh; width: 100vw; background-repeat: no-repeat; background-size: cover; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .hero__title { position: relative; } .hero__title:before, .hero__title:after { text-transform: uppercase; font-size:3em; content: attr(data-text); position: absolute; top: 0; left: 0; color: white; mix-blend-mode: overlay; opacity: 0.6; } .hero__title-text { mix-blend-mode: overlay; color: white; font-size:3em; text-transform: uppercase; position: relative; } 
     <div class='hero'> <h1 class='hero__title' data-text="The Orient"> <span class='hero__title-text'>The orient</span> </h1> </div>

    • No, you need to print text on a white background in white font, opacity is at the background: 0.7 and for the font to remain bright white rather than gray, under the background color - Proshka

    It's simple: choose the color of the substrate instead of transparency and the substrate will remain transparent and the colors of the elements on the substrate will retain their brightness

     div:nth-child(1) { background-color: #190059; width: 150px; height: 150px; position: relative; } div:nth-child(1) div:nth-child(1){ background-color: #f9f3f38f; width: 100px; height: 100px; position: absolute; top: 10px; left: 10px; } div:nth-child(1) div:nth-child(1) p { color: #ffffff; } 
     <div> <div> <p>Все получится</p> </div> </div>