Transparency and Text Problem

transparency and text problem

Your choices are:

• Using CSS3: background: rgba(255, 255, 255, 0.3). Live Demo
• Absolutely position two <div> tags on top of each other. One of them is the background, and has the opacity setting. The second one has the text in it, and a transparent background.
• As you hinted at in your question, you could use a .png file with 30% transparency.

I knew I'd read about a way to make the rgba work in IE.

See: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

CSS opacity and text problem

Short answer: No.

Long answer: Yes, if you use rgba colors instead of the opacity property. For example, the following would give you a black background with 20% opacity, and black text with full opacity:

p {
    background: rgba(0, 0, 0, 0.2);
    color: #000000;
}

For background images, use a PNG with alpha channels.

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.

Transparency problem displaying text with Pygame

The problem is the surface you are placing the text on. If you want to keep the transparency in the formation of the text, you need to create a pygame.Surface object with an per pixel alpha format. Use the pygame.SRCALPHA flag:

btn_play_surface = pygame.Surface(btn_play_size)

btn_play_surface = pygame.Surface(btn_play_size, pygame.SRCALPHA)

Alternatively you can set the color key for the transparent color with set_colorkey:

btn_play_surface = pygame.Surface(btn_play_size)
btn_play_surface.set_colorkey((0, 0, 0))

How to fix an issue with background-image opacity causing text to be unreadable?

since you need to darken your image with black, you can set a dark overlay over the image with a translucide gradient which will have no effects on the contents :

example related to How to add a color overlay to a background image? + 2 other methods:

html,
body,
.bg-for-1 {
  height: 100%;
}

.bg-for-1 {
color:white;}

.bg-for-1 .first {
  display: flex;
  flex-flow:column;
  justify-content:center;
  align-items: center;

  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/1015/6000/4000);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-for-1 .first h3 {
  color: white;
  position: relative;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-for-1">
  <div class="first">
    <h1>Nice Portfolio!</h1>
    <h3>Find something for you!</h3>
    <button class="btn btn-danger mt-3">Press</button>
  </div>
</div>

<div class="second">
  <h3>Lot of amazing projects for you and your team!</h3>
  <h5>Just simply and nice projects for you and your team , check what we recomandate for you, we work fast and clear.</h5>
  <button type="button" class="btn btn-dark mt-5">Press And Check!</button>
</div>

<div>new div goes on previous</div>

body {
  background: url(https://picsum.photos/seed/picsum/800/800) no-repeat center;
  background-size: cover;
}

h1 {
  text-align: center;
  font-size: 7rem;
  font-weight: 600;
  font-family: 'Segoe UI';
  margin: 0;
  color: transparent;
  text-stroke: 2px #000;
  -webkit-text-stroke: 2px #000;
}

<h1>NIFTY TEXT</h1>

position: relative;