backplate-bg-image-006-ref.html (620B)
1 <!DOCTYPE html> 2 <link rel="stylesheet" href="ahem.css"> 3 <title>Reference: Text in a native button or input object that overlaps a background image should be backplated.</title> 4 <style> 5 body { 6 font: 20px Ahem; 7 } 8 .std { 9 background-image: url("blue.png"); 10 height: 500px; 11 } 12 .fake-backplate { 13 background-color: white; 14 width: max-content; 15 } 16 button { 17 font: 20px Ahem; 18 } 19 </style> 20 <div class="std"> 21 <button>ppppp</button><span class="fake-backplate">ppppp</span><br> 22 <form> 23 <input> 24 </form> 25 <br> 26 <span class="fake-backplate">ppppp<!-- no whitespace 27 --><button>ppppp</button><!-- no whitespace 28 -->ppppp</span> 29 </div>