Making text background transparent but not text itself

Don’t use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.

.content {
    padding:20px;
    width:710px;
    position:relative;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.5);
}

See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.

Related Posts:

  1. CSS Background Opacity [duplicate]
  2. CSS Background Opacity [duplicate]
  3. Transparent CSS background color
  4. How to place a text next to the picture?
  5. CSS no text wrap
  6. How to change text transparency in HTML/CSS?
  7. Vertical Text Direction
  8. How to darken a background using CSS?
  9. Indent starting from the second line of a paragraph with CSS
  10. How to make blinking/flashing text with CSS 3
  11. Setting a max character length in CSS
  12. How can I align text directly beneath an image?
  13. Half circle with CSS (border, outline only)
  14. Unblur content inside blurring background div
  15. Failed to load resource: the server responded with a status of 404 (Not Found) css
  16. CSS background-image-opacity?
  17. Resize image proportionally with CSS?
  18. Setting table column width
  19. Embed image in a
  20. What is difference between png8 and png24
  21. How to center an iframe horizontally?
  22. Can I have an onclick effect in CSS?
  23. How to style a checkbox using CSS
  24. CSS Background Image Not Displaying
  25. CSS: Moving the text down a few pixels but keeping the background still?
  26. Fix footer to bottom of page
  27. How to position text over an image in css
  28. shifting a piece of text down using CSS
  29. Display Two
  30. Add border-bottom to table row
  31. Center form submit buttons HTML / CSS
  32. AngularJS ngClass conditional
  33. CSS: Moving the text down a few pixels but keeping the background still?
  34. How to use css first-child with :not()
  35. How to “crop” a rectangular image into a square with CSS?
  36. Should I use px or rem value units in my CSS?
  37. How to draw diagonal lines with css
  38. Change background image opacity
  39. How to display and hide a div with CSS?
  40. How to keep footer at bottom of screen [duplicate]
  41. Draw a line in a div
  42. Change Color of Fonts in DIV (CSS)
  43. Why is “cursor:pointer” effect in CSS not working
  44. a href link for entire div in HTML/CSS
  45. How do I set vertical space between list items?
  46. Check if an element contains a class in JavaScript?
  47. Complete list of reasons why a css file might not be working
  48. html div background image not showing up
  49. Bring element to front using CSS
  50. Brackets – Live Preview not working
  51. How to apply style classes to td elements?
  52. CSS set li indent
  53. how to overlap two div in css?
  54. Why does this CSS margin-top style not work?
  55. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  56. HTML list-style-type dash
  57. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery
  58. How can I center a div within another div?
  59. How to align content of a div to the bottom
  60. How can I make my footer center to the bottom of the page?
  61. Remove scrollbar from iframe
  62. Why would max-width not work on this?
  63. Dynamic height of div with css
  64. Removing ul indentation with CSS
  65. vertical divider between two columns in bootstrap
  66. Why an inline “background-image” style doesn’t work in Chrome 10 and Internet Explorer 8?
  67. How to center a navigation bar with CSS or HTML?
  68. Why write script type=”text/javascript” when the mime type is set by the server?
  69. My CSS won’t link to my HTML file
  70. Table fixed header and scrollable body
  71. How to make a div 100% height of the browser window
  72. css display table cell requires percentage width
  73. Why doesn’t min-height not work on my page?
  74. How to write a:hover in inline CSS?
  75. CSS Resize/Zoom-In effect on Image while keeping Dimensions
  76. How to draw a trapezium/trapezoid with css3?
  77. How can I change the Bootstrap default font family using font from Google?
  78. Add stroke around text – on the outside – with css?
  79. How to create a text box in PHP to output data
  80. Full Page < iframe >
  81. Change cursor to hand when mouse goes over a row in table
  82. CSS table td width – fixed, not flexible
  83. Set textarea width to 100% in bootstrap modal
  84. Can I apply a CSS style to an element name?
  85. CSS max-height not working
  86. How can I make a div not larger than its contents?
  87. Horizontal list items
  88. How to make Bootstrap Panel body with fixed height
  89. word-wrap break-word does not work in this example
  90. Change navbar text color Bootstrap
  91. position fixed is not working
  92. Create a slanted edge to a div [duplicate]
  93. Override USER AGENT STYLE SHEET – Chrome
  94. Place a button right aligned
  95. aking a flex item float right
  96. td widths, not working?
  97. How put links in wordpress dynamic sidebar?
  98. WordPress editor not creating tags properly in tables
  99. Using custom HTML tags to WordPress [closed]
  100. Main menu effect visited

Leave a Comment